Brickslab.Lib

@brickslab./ui-web

HeaderBar flexible (logo, title, navigation, actions) avec positionnement dynamique de la navigation et support glassmorphism.

Aperçu

Navigation centrée + blur

BricksLab

Brand uniquement

Store

Navigation à droite

Catalog

Props

Prop	Type	Défaut	Requis	Description
`logo`	`string \| ReactNode`	—	—	Logo optionnel (URL d’image ou ReactNode).
`logoHeight`	`number \| string`	—	—	Hauteur du logo si `logo` est une URL (ex: `28`, `"40px"`, `"2rem"`).
`logoAlt`	`string`	—	—	Attribut alt de l’image si `logo` est une URL.
`title`	`string`	—	—	Titre / brand optionnel.
`titleSize`	`number \| string`	—	—	Taille du titre sur desktop/tablette (ex: `16`, `"18px"`, `"1.1rem"`).
`titleMobileSize`	`number \| string`	—	—	Taille du titre dans le panneau mobile (menu).
`navigation`	`ReactNode`	—	—	Navigation (contenu libre).
`actions`	`ReactNode`	—	—	Zone d’actions (boutons, icônes...).
`navPosition`	`"left" \| "center" \| "right"`	`"left"`	—	Position de la navigation dans le layout.
`backgroundColor`	`string`	—	—	Couleur de fond (supporte rgba/transparent).
`blur`	`boolean`	`false`	—	Active l’effet glassmorphism (backdrop blur).
`withBorder`	`boolean`	`false`	—	Affiche une bordure basse optionnelle.
`className`	`string`	—	—	Classe CSS racine.
`style`	`React.CSSProperties`	—	—	Styles inline sur la racine.

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="..."
  logoHeight="..."
  logoAlt="..."
  title="..."
  titleSize="..."
  titleMobileSize="..."
  navigation={<span>...</span>}
  actions={<span>...</span>}
  // +6 autres props disponibles
/>

logologoHeightlogoAlttitletitleSizetitleMobileSizenavigationactionsnavPositionbackgroundColorblurwithBorderclassNamestyle

Utilisation

API

tsx

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

<HeaderBar
  logo="/logo.svg"
  logoHeight={32}
  logoAlt="BricksLab"
  title="BricksLab"
  titleSize="18px"
  titleMobileSize="14px"
  navPosition="center"
  blur
  withBorder
  backgroundColor="color-mix(in srgb, var(--color-bg) 60%, transparent)"
  navigation={
    <nav style={{ display: "flex", gap: 20 }}>
      <a href="/components">Composants</a>
      <a href="/docs">Docs</a>
      <a href="/about">À propos</a>
    </nav>
  }
  actions={
    <>
      <button>Se connecter</button>
      <button>S’inscrire</button>
    </>
  }
/>