Statut
-
Component checklist
Usage
<dsa-dropdown>
<dsa-button slot="trigger">Menu</dsa-button>
<dsa-menu-navigation>
<dsa-menu-item type="link" href="#">Lien</dsa-menu-item>
<dsa-menu-item type="link" href="#">Lien 2</dsa-menu-item>
<dsa-menu-item type="button">Bouton</dsa-menu-item>
</dsa-menu-navigation>
</dsa-dropdown>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/menu-navigation/menu-navigation.js';
import '@ds-autonomie/web-components/dist/components/button/button.js';
import '@ds-autonomie/web-components/dist/components/dropdown/dropdown.js';
import '@ds-autonomie/web-components/dist/components/menu-item/menu-item.js';
import type { DSAMenuNavigation } from '@ds-autonomie/web-components';
import type { DSAButton } from '@ds-autonomie/web-components';
import type { DSADropdown } from '@ds-autonomie/web-components';
import type { DSAMenuItem } from '@ds-autonomie/web-components';
</script>
API
Références
L'élément dsa-menu-navigation peut être utilisé par exemple dans les éléments suivants :
- pour une barre de navigation (sur la largeur de l’écran en desktop) comprenant plusieurs menus ou liens : dsa-navbar
- pour un menu simple : dsa-dropdown
- pour un sous-menu : dsa-menu-accordion
Voici la liste des éléments pouvant être utilisé à l’intérieur de dsa-menu-navigation :
- dsa-menu-label
- dsa-menu-item (type link ou button)
- dsa-menu-accordion
- dsa-divider
- la balise html <a>