Aller au contenu
Design system

Composants · navigation

Navigation

Se repérer (fil d’Ariane, onglets de statut avec compteurs), avancer (étapes), changer de contexte (société, site) et aller partout au clavier (palette ⌘K).

  • Tabs
  • Breadcrumb
  • Stepper
  • SegmentedControl
  • CommandPalette
  • useCommandPalette
  • CompanySwitcher
  • CountBadge
  • UserMenu
  • SidebarNav
  • Sidebar
  • Header
  • NavIcon
  • LinkProvider

Se repérer

Tabs — onglets de statut avec compteurs

Quand l’utiliser : underline pour les onglets de page (statuts d’une liste, sections d’une fiche) ; pill pour des filtres compacts. Les compteurs montrent le travail à traiter (principe AGB).

2 commandes dans « À valider ».
3 lignes · 950 sacs.
Flèches gauche/droite pour changer d’onglet, défilement horizontal si les onglets débordent (mobile).
Afficher le code
<Tabs value={tab} onValueChange={setTab}>
  <TabsList aria-label="Statut des commandes">
    <TabsTrigger value="all" count={10}>Toutes</TabsTrigger>
    <TabsTrigger value="pending_approval" count={1} countTone="warning">À valider</TabsTrigger>
    <TabsTrigger value="cancelled" count={0}>Annulées</TabsTrigger>
  </TabsList>
  <TabsContent value="all">…</TabsContent>
</Tabs>

Breadcrumb

Quand l’utiliser : En tête de chaque page de détail ou de formulaire, pour remonter d’un niveau. Au-delà de maxItems, les niveaux intermédiaires sont regroupés derrière « … ».

Afficher le code
<Breadcrumb items={[
  { label: 'Ventes', href: '/sales' },
  { label: 'Commandes', href: '/sales/orders' },
  { label: 'CMD-2026-00421' },
]} />

Progresser et basculer

Stepper

Quand l’utiliser : Assistant en plusieurs étapes (création guidée, import, clôture). Les étapes terminées sont cliquables pour revenir en arrière ; une étape invalide passe en erreur.

Afficher le code
<Stepper steps={steps} currentStep={2} onStepClick={setStep} />
<Stepper orientation="vertical" steps={[…, { id: 'bank', label: 'Rapprochement', state: 'error' }]} currentStep={1} />

SegmentedControl

Quand l’utiliser : Basculer entre 2 à 4 vues ou unités d’un même contenu (liste / cartes, kg / t). Ce n’est pas une navigation : le contenu reste le même, présenté autrement.

size="md" avec icônes
size="sm"
size="touch" fullWidth
disabled
Afficher le code
<SegmentedControl aria-label="Affichage" value={view} onValueChange={setView}
  options={[{ value: 'list', label: 'Liste', icon: <List /> }, { value: 'cards', label: 'Cartes', icon: <LayoutGrid /> }]} />

Accès rapide et contexte

CommandPalette (⌘K)

Quand l’utiliser : Accès universel au clavier : aller à un écran, ouvrir un document par son numéro ou le nom du tiers, lancer une action. Ouverte par ⌘K / Ctrl K (useCommandPalette) ou par le champ de recherche de l’en-tête.

ou ⌘K / CtrlK
Essayez « 421 », « kossodo », « pesée » ou « factures ». Les accents et majuscules sont ignorés. Ici, la sélection affiche un toast au lieu de naviguer.
Afficher le code
const { open, setOpen } = useCommandPalette();   // raccourci ⌘K / Ctrl K inclus
<Button onClick={() => setOpen(true)}>Rechercher</Button>
<CommandPalette open={open} onOpenChange={setOpen}
  items={[...navItems, ...documents, ...actions]}
  recentItems={recent}
  onSelect={(item) => item.href && router.push(item.href)} />

CompanySwitcher

Quand l’utiliser : Dans l’en-tête : changer d’organisation (si plusieurs), de société et de site. Le niveau organisation n’apparaît que s’il y en a plus d’une ; une recherche apparaît au-delà de 8 options.

Afficher le code
<CompanySwitcher
  tenants={tenants} tenantId={tenant} onTenantChange={setTenant}
  companies={companies} companyId={company} onCompanyChange={setCompany}
  sites={sites} siteId={site} onSiteChange={setSite} />

Éléments de coquille

CountBadge, NavIcon et UserMenu

Quand l’utiliser : CountBadge : compteur de travail à traiter (navigation, onglets, icônes d’en-tête). UserMenu : profil, préférence de thème, déconnexion, en haut à droite de l’en-tête.

311275 lots en quarantaine99+02
Afficher le code
<CountBadge count={27} tone="accent" />  <CountBadge count={150} max={99} tone="danger" />
<UserMenu name="Awa Démo" role="Directrice industrielle" theme={theme} onThemeChange={setTheme} onSignOut={…} />

Sidebar, SidebarNav et Header

Quand l’utiliser : Coquille de l’application (assemblée par AppShell) : sidebar marine à deux niveaux avec compteurs, repliable, en tiroir sous 1024 px ; en-tête avec sélecteur de société, recherche ⌘K, notifications, boîte de travail et menu utilisateur. Le registre de navigation est unique (ADR-0010).

Chemin courant simulé :

/sales/orders

Cliquez une entrée : l’état actif suit currentPath (aucune navigation réelle ici). La sidebar complète n’est visible qu’à partir de 1024 px ; en dessous, le burger de l’en-tête ouvre le tiroir.
Afficher le code
<Sidebar modules={filterNav(navRegistry, { activeModules, can })} currentPath={pathname}
  collapsed={collapsed} onCollapsedChange={setCollapsed}
  mobileOpen={mobileOpen} onMobileOpenChange={setMobileOpen} />
<Header onMenuClick={() => setMobileOpen(true)} companySwitcher={<CompanySwitcher … />}
  onSearchClick={openPalette} notificationsCount={4} inboxCount={11} user={{ name: 'Awa Démo', … }} />

SidebarNav seule

Quand l’utiliser : La liste de navigation sans la coquille : panneau de navigation secondaire, tiroir personnalisé. collapsed affiche les icônes seules avec infobulles.

Afficher le code
<SidebarNav modules={navRegistry} currentPath="/purchasing/collections" aria-label="Navigation principale" />