BjSidemenu

Menu latéral React avec liens, état actif et sous-listes optionnelles.

Utilisation

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjSidemenu
      title="Rubrique"
      links={[
        { label: 'Accueil', to: '/', active: true },
        {
          label: 'Section',
          to: '/section',
          children: [{ label: 'Sous-page', to: '/section/sous' }],
        },
      ]}
    />
  )
}

Aperçu

Sans titre

Omettre title : le paragraphe .bj-sidemenu__title n’est pas rendu.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function NoTitle() {
  return (
    <BjSidemenu
      links={[
        { label: 'Vue d’ensemble', to: '/vue' },
        { label: 'Statistiques', to: '/stats' },
      ]}
    />
  )
}

Avec title

title affiche .bj-sidemenu__title au-dessus de la liste.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function WithTitle() {
  return (
    <BjSidemenu
      title="Démarches en ligne"
      links={[
        { label: 'Liste', to: '/demarches' },
        { label: 'Suivi', to: '/suivi' },
      ]}
    />
  )
}

Lien actif (active)

active: true ajoute bj-sidemenu__link--active et aria-current="page" sur le lien.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function WithActive() {
  return (
    <BjSidemenu
      links={[
        { label: 'Étape 1', to: '/etape-1' },
        { label: 'Étape 2', to: '/etape-2', active: true },
        { label: 'Étape 3', to: '/etape-3' },
      ]}
    />
  )
}

children (sous-menu)

children est un tableau de liens rendu dans .bj-sidemenu__sublist sous le parent.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function Nested() {
  return (
    <BjSidemenu
      links={[
        {
          label: 'Parent',
          to: '/parent',
          children: [
            { label: 'Enfant A', to: '/parent/a' },
            { label: 'Enfant B', to: '/parent/b', active: true },
          ],
        },
      ]}
    />
  )
}

Combinaison title + actif + imbrication

Cas typique : rubrique, page courante dans une section, sous-pages.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function FullMenu() {
  return (
    <BjSidemenu
      title="Mon dossier"
      aria-label="Navigation latérale du dossier"
      links={[
        { label: 'Résumé', to: '/dossier', active: true },
        {
          label: 'Pièces',
          to: '/dossier/pieces',
          children: [
            { label: 'À fournir', to: '/dossier/pieces/manquantes' },
            { label: 'Déposées', to: '/dossier/pieces/deposees' },
          ],
        },
        { label: 'Historique', to: '/dossier/historique' },
      ]}
    />
  )
}

Attributs natifs du nav

id, className, aria-label supplémentaires sur le <nav> racine.

import { BjSidemenu } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  return (
    <BjSidemenu
      id="sidebar-nav"
      className="layout-sidebar__nav"
      data-testid="sidemenu"
      links={[{ label: 'Accueil', to: '/' }]}
    />
  )
}

Props

Prop	Description
`title`	Titre optionnel au-dessus des liens.
`links`	Tableau d'entrées : label, to, active et children optionnels ; children pour un sous-menu.
`(nav props)`	Attributs nav natifs supplémentaires.