Brickslab.Toolsv2.1.1

@brickslab./ui-web

Barre de navigation principale en position fixe. Composée de trois slots (logo, nav, actions) pour une flexibilité maximale. La hauteur est configurable via la prop height.

Aperçu

HeaderBar complet — logo + nav + actions (conteneur relatif, overflow hidden)

BricksLab

logo seul

BricksLab

hauteur personnalisée (height=80)

BricksLab

Props

PropTypeDéfautRequisDescription
logoReactNode——Contenu du slot logo (gauche). Accepte tout noeud React : image, texte, composant.
navReactNode——Contenu du slot navigation (centre). Typiquement un composant TopNav ou des liens.
actionsReactNode——Contenu du slot actions (droite). Boutons d'action, menu utilisateur, etc.
heightnumber60—Hauteur en pixels du header. Affecte la hauteur de la barre fixe.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  logo={<span>...</span>}
  nav={<span>...</span>}
  actions={<span>...</span>}
  height={60}
/>
logonavactionsheight

Utilisation

tsx
import { HeaderBar } from "@brickslab./ui-web";

<HeaderBar
  logo={<span style={{ fontWeight: 700, color: "var(--color-brand)" }}>BricksLab</span>}
  nav={
    <nav style={{ display: "flex", gap: 24 }}>
      <a href="/components">Composants</a>
      <a href="/docs">Documentation</a>
      <a href="/about">À propos</a>
    </nav>
  }
  actions={
    <button>Se connecter</button>
  }
  height={60}
/>