Statut
-
Component checklist
Usage
La barre de navigation est un ensemble de liens et de menus, sous la forme d’une barre horizontale prenant la largeur de l’écran sur desktop.
Pour les menus simples, voir dsa-dropdown.
Structure
L’élément dsa-navbar s’utilise avec les sous-éléments suivant :
- dsa-navbar-link: utilisé pour ajouter un lien directement dans la barre de navigation
- dsa-navbar-menu: utilisé pour ajouter un menu dans la barre de navigation. Doit contenir un élément dsa-menu-navigation (doc)
<dsa-navbar>
<dsa-navbar-link href="#">Accueil</dsa-navbar-link>
<dsa-navbar-link href="#">Annuaire</dsa-navbar-link>
<dsa-navbar-menu label="Mes démarches">
<dsa-menu-navigation>
<dsa-menu-item type="link" href="#">Je crée mon dossier</dsa-menu-item>
<dsa-menu-item type="link" href="#">Je gère mon dossier</dsa-menu-item>
<dsa-menu-item type="link" href="#">Je consulte l'annuaire</dsa-menu-item>
</dsa-menu-navigation>
</dsa-navbar-menu>
<dsa-navbar-menu label="Informations utiles">
<dsa-menu-navigation>
<dsa-menu-item type="link" href="#">Qui</dsa-menu-item>
<dsa-menu-item type="link" href="#">Quoi</dsa-menu-item>
<dsa-menu-item type="link" href="#">Comment</dsa-menu-item>
<dsa-menu-item type="link" href="#">Pourquoi</dsa-menu-item>
</dsa-menu-navigation>
</dsa-navbar-menu>
<dsa-navbar-link href="#">Contacter le support</dsa-navbar-link>
</dsa-navbar>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/navbar/navbar.js';
import '@ds-autonomie/web-components/dist/components/navbar-link/navbar-link.js';
import '@ds-autonomie/web-components/dist/components/navbar-menu/navbar-menu.js';
import '@ds-autonomie/web-components/dist/components/menu-navigation/menu-navigation.js';
import type { DSANavbar, DSANavbarMenu, DSAMenuNavigation } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser le composant bouton filtre
API
dsa-navbar
dsa-navbar-link
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
href |
L'URL ou l'ID de la section vers laquelle le lien doit sauter. |
string |
'' |
|
mobile |
Affiche le lien en mode mobile. Hérité du parent dsa-navbar |
boolean |
false |
|
rel |
L'attribut rel à utiliser sur le lien. Utilisé uniquement lorsque href est défini |
string |
'noreferrer noopener' |
|
target |
Indique au navigateur ou ouvrir le lien. Utilisé uniquement lorsque href est défini |
'_blank' | '_parent' | '_self' | '_top' |
- |
|
current |
Indique si l'élément représente l'item courant. La valeur renseignée sera directement transmise à l'attribut natif `aria-current`. Se référer à la documentation pour une liste des valeurs possibles. |
string |
- |
Méthodes
|
Nom |
Description |
Type |
|
blur() |
Enlève le focus du lien |
() => void |
|
focus() |
Met le focus sur le lien |
(options?: FocusOptions) => void |
dsa-navbar-menu
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
label |
Le libellé du bouton permettant d'ouvrir le menu. |
string |
'' |
|
mobile |
Affiche le menu en mode mobile. Hérité du parent dsa-navbar |
boolean |
false |
|
open |
Indique si le menu est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour afficher et masquer le menu, ou vous pouvez utiliser les méthodes show() et hide() et cet attribut reflétera l'état ouvert du menu |
boolean |
false |
Méthodes
|
Nom |
Description |
Type |
|
hide() |
Cache le contenu du menu |
() => Promise<void> |
|
show() |
Affiche le contenu du menu |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(defaut) |
Le contenu principal. Utiliser un élément dsa-menu-navigation |
|
label |
Le libellé du bouton. Vous pouvez aussi utiliser l'attribut label |
Références
Voici la liste des références vers les composants liés :