Closed Sharlaan closed 2 months ago
Bonjour @Sharlaan,
Pour les sugestion d'ajout de fonctionalité il faut se tourner vers l'équipe du SIG et ouvrir une issue sur https://github.com/GouvernementFR/dsfr.
react-dsfr est un toolkit d'intégration pour React.
En l'occurence je pense que les sous menu n'on pas été implémenté pour des questions d'accécibilité, en revanche ile y a les "mega menu":
https://components.react-dsfr.codegouv.studio/?path=/story/components-mainnavigation--mega-menu
<Header
brandTop={<>INTITULE<br />OFFICIEL</>}
className="margin-bottom-600px"
homeLinkProps={{
href: '/',
title: 'Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'
}}
navigation={[
{
isActive: true,
megaMenu: {
categories: [
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
isActive: true,
linkProps: {
href: '#'
},
text: 'Page active'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
isActive: true,
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
}
],
leader: {
link: {
linkProps: {
href: '#'
},
text: 'Voir toute la rubrique'
},
paragraph: 'Lorem [...] elit ut.',
title: 'Titre éditorialisé'
}
},
text: 'Entrée mega menu'
},
{
megaMenu: {
categories: [
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
isActive: true,
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
},
{
categoryMainLink: {
linkProps: {
href: '#'
},
text: 'Nom de catégorie'
},
links: [
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
},
{
linkProps: {
href: '#'
},
text: 'Lien de navigation'
}
]
}
],
leader: {
link: {
linkProps: {
href: '#'
},
text: 'Voir toute la rubrique'
},
paragraph: 'Lorem [...] elit ut.',
title: 'Titre éditorialisé'
}
},
text: 'Entrée mega menu'
},
{
linkProps: {
href: '#',
target: '_self'
},
text: 'accès direct'
},
{
linkProps: {
href: '#',
target: '_self'
},
text: 'accès direct'
}
]}
/>
Merci beaucoup pour votre réactivité ! :D
Okay merci j'avais mal compris le mega-menu, "à comprendre à la verticale" :)
Bonjour,
Dans le cadre d'une étude de faisabilité pour l'utilisation du Header de @codegouv, j'ai découvert que le composant de navigation en mode Menu, ne permet pas de "sous-niveau" supplémentaire.
Dans le code source, effectivement, je vois que le sous-composant \<Menu> ne supporte que des linkProps.
Du coup, je m'interroge s'il y a une contre-indication qui interdirait l'usage de sous-menus ?
... ou serait-ce possible à minima de rajouter un seul sous-niveau dans \<Menu> ?
Merci d'avance