Brickslab.Toolsv2.1.1

@brickslab./ui-web

Barre de navigation supérieure responsive avec logo, recherche de composants et menu burger pour mobile. Composant personnalisé du catalog qui gère la navigation principale et la recherche en-tête du site.

Caractéristiques

  • Position fixe : Reste en haut de la page lors du scroll
  • Logo avec branding : Affiche le logo Brickslab avec couleurs de marque
  • Recherche intégrée : Champ de recherche avec suggestions en dropdown
  • SearchResults : Affiche les résultats de recherche filtrés
  • Menu burger mobile : S'affiche sur écrans de max 1024px
  • Responsive : Masque la barre de recherche sur très petits écrans (max 768px)

Props

PropTypeDéfautRequisDescription
childrenReactNode (internal)——La barre supérieure gère sa propre structure interne avec logo, recherche et menu burger mobile.
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
  children={<span>...</span>}
/>
children

Composants internes

// Topbar includes: // 1. Responsive layout (fixed position top) // 2. Logo with Brickslab branding // 3. Search input with component filtering // 4. SearchResults dropdown // 5. Burger menu for mobile (<1024px) // 6. MobileNav integration

Utilisation

Implémentation simple

tsx
import { Topbar } from "@brickslab/catalog";

export default function Page() {
  return (
    <>
      <Topbar />
      {/* Page content */}
    </>
  );
}

Démonstration interactive

Vous voyez déjà la Topbar au-dessus de cette page

La Topbar est visible en haut de l'écran avec :
  • Logo Brickslab
  • Champ de recherche
  • Menu burger (visible sur mobile)

Notes importantes

⚠️ La Topbar est un composant personnalisé du catalogue, non pas un composant de la librairie @brickslab./ui-web. Elle intègre la recherche, la navigation mobile et le branding global du site.