BjNavigation

Conteneur de navigation React : liste de liens via children (structure .bj-nav__item / .bj-nav__link).

Utilisation

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

export function Example() {
  return (
    <BjNavigation>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="#">Accueil</a>
      </li>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="#">Services</a>
      </li>
    </BjNavigation>
  )
}

Aperçu

Liste de li (children)

Chaque entrée est un li.bj-nav__item contenant une ancre .bj-nav__link.

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

export function TwoLinks() {
  return (
    <BjNavigation>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="/">Home</a>
      </li>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="/about">About</a>
      </li>
    </BjNavigation>
  )
}

aria-label et props nav

Le composant définit aria-label="Navigation" par défaut ; passez aria-label sur BjNavigation pour le remplacer (spread après la valeur par défaut dans le code source : vos props peuvent surcharger).

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

export function LabeledNav() {
  return (
    <BjNavigation aria-label="Navigation secondaire" id="subnav" className="app-subnav">
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="/profil">Profil</a>
      </li>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="/parametres">Paramètres</a>
      </li>
    </BjNavigation>
  )
}

Lien courant

Utilisez aria-current="page" et une classe d’état sur le lien actif.

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

export function WithCurrent() {
  return (
    <BjNavigation aria-label="Menu principal">
      <li className="bj-nav__item">
        <a className="bj-nav__link bj-nav__link--active" href="/" aria-current="page">
          Accueil
        </a>
      </li>
      <li className="bj-nav__item">
        <a className="bj-nav__link" href="/demarches">Démarches</a>
      </li>
    </BjNavigation>
  )
}

Plusieurs entrées

Navigation horizontale typique avec plusieurs rubriques.

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

const items = [
  { href: '/', label: 'Accueil' },
  { href: '/services', label: 'Services' },
  { href: '/actualites', label: 'Actualités' },
  { href: '/contact', label: 'Contact' },
] as const

export function MappedNav() {
  return (
    <BjNavigation>
      {items.map(({ href, label }) => (
        <li key={href} className="bj-nav__item">
          <a className="bj-nav__link" href={href}>{label}</a>
        </li>
      ))}
    </BjNavigation>
  )
}

Props

PropDescription
childrenÉléments li.bj-nav__item à placer dans le ul interne.
(nav props)Attributs nav natifs supplémentaires (aria-label, id, className, etc.).