- applikasjonen krever global navigasjon med mer enn fem sider, fordelt på opptil to nivåer (nivå 1 og nivå 2). Konvensjonen er å vise menyen på venstre side.
- du har færre enn 3 menypunkter i navigasjonen, vurder heller Top navigation
Ønsker du et ekstra navigasjonsnivå over SideNavigation, kan du kombinere den med Top navigation.
SideNavigation finnes både med og uten ikon. Ikoner på et menyelement skal kun brukes på nivå 1. Komponenten er tilgjengelig i normal og kompakt versjon. Den kompakte versjonen er utviklet for å gi enkel oversikt og unngå overdreven scrolling for proffbrukere med mye innhold.
Noen applikasjoner kan trenge en mer avansert menystruktur. Da kan SideNavigationGroup brukes til å gruppere menyvalg sammen, for en logisk strukturering av ellers uoversiktlig innhold. Menygruppene kan kollapses, og du velger selv om noen eller alle skal være åpne fra start. Hver menygruppe bør helst kun ha ett nivå under seg — unngå nøstede undermenyer i menygruppen.
Om du ønsker å synliggjøre at en lenke finnes, men er utilgjengelig av en eller annen grunn, kan du gjøre et menyelement disabled. Dette bør helst unngås, siden det ikke finnes en god måte å fortelle brukeren hvorfor elementet ikke er tilgjengelig for dem — vurder heller å fjerne elementet fra listen.
<SideNavigation>
<SideNavigationItem active={true} href="#">
<UserIcon aria-hidden="true" /> Min konto
</SideNavigationItem>
<SideNavigationItem disabled={true}>
<StatsIcon aria-hidden="true" /> Statistikk
</SideNavigationItem>
<SideNavigationItem href="#">
<SettingsIcon aria-hidden="true" /> Innstillinger
</SideNavigationItem>
</SideNavigation>
<SideNavigation size="small">
<SideNavigationItem href="#menyer" active={true}>
Toppen
</SideNavigationItem>
<SideNavigationItem
as="button"
type="button"
onClick={() => alert('Hei på deg')}
>
Si hei
</SideNavigationItem>
<SideNavigationItem disabled={true}>Utilgjengelig</SideNavigationItem>
<SideNavigationItem>
Andre alternativer
<SideNavigation size="small">
<SideNavigationItem href="#">Sparkesykkel</SideNavigationItem>
<SideNavigationItem disabled={true}>Ski</SideNavigationItem>
</SideNavigation>
</SideNavigationItem>
</SideNavigation>
<SideNavigation size="small">
<SideNavigationItem active={true} href="#">
<UserIcon aria-hidden="true" /> Min konto
</SideNavigationItem>
<SideNavigationItem disabled={true}>
<StatsIcon aria-hidden="true" /> Statistikk
</SideNavigationItem>
<SideNavigationItem href="#">
<SettingsIcon aria-hidden="true" /> Innstillinger
</SideNavigationItem>
</SideNavigation>
<SideNavigationGroup title="En gruppe">
<SideNavigation>
<SideNavigationItem href="#menyer" active={true}>
Toppen
</SideNavigationItem>
<SideNavigationItem
as="button"
type="button"
onClick={() => alert('Hei på deg')}
>
Si hei
</SideNavigationItem>
<SideNavigationItem disabled={true}>Utilgjengelig</SideNavigationItem>
<SideNavigationItem>
Andre alternativer
<SideNavigation>
<SideNavigationItem href="#">Sparkesykkel</SideNavigationItem>
<SideNavigationItem disabled={true}>Ski</SideNavigationItem>
</SideNavigation>
</SideNavigationItem>
</SideNavigation>
</SideNavigationGroup>
<SideNavigationGroup title="Enda en gruppe">
<SideNavigation>
<SideNavigationItem href="#menyer" active={true}>
Toppen
</SideNavigationItem>
<SideNavigationItem
as="button"
type="button"
onClick={() => alert('Hei på deg')}
>
Si hei
</SideNavigationItem>
<SideNavigationItem disabled={true}>Utilgjengelig</SideNavigationItem>
<SideNavigationItem>
Andre alternativer
<SideNavigation>
<SideNavigationItem href="#">Sparkesykkel</SideNavigationItem>
<SideNavigationItem disabled={true}>Ski</SideNavigationItem>
</SideNavigation>
</SideNavigationItem>
</SideNavigation>
</SideNavigationGroup>
<SideNavigationGroup title="En gruppe" defaultOpen={true}>
<SideNavigation size="small">
<SideNavigationItem href="#menyer" active={true}>
Toppen
</SideNavigationItem>
<SideNavigationItem
as="button"
type="button"
onClick={() => alert('Hei på deg')}
>
Si hei
</SideNavigationItem>
<SideNavigationItem disabled={true}>Utilgjengelig</SideNavigationItem>
<SideNavigationItem>
Andre alternativer
<SideNavigation size="small">
<SideNavigationItem href="#">Sparkesykkel</SideNavigationItem>
<SideNavigationItem disabled={true}>Ski</SideNavigationItem>
</SideNavigation>
</SideNavigationItem>
</SideNavigation>
</SideNavigationGroup>
<SideNavigationGroup title="Enda en gruppe" defaultOpen={true}>
<SideNavigation size="small">
<SideNavigationItem href="#menyer" active={true}>
Toppen
</SideNavigationItem>
<SideNavigationItem
as="button"
type="button"
onClick={() => alert('Hei på deg')}
>
Si hei
</SideNavigationItem>
<SideNavigationItem disabled={true}>Utilgjengelig</SideNavigationItem>
<SideNavigationItem>
Andre alternativer
<SideNavigation size="small">
<SideNavigationItem href="#">Sparkesykkel</SideNavigationItem>
<SideNavigationItem disabled={true}>Ski</SideNavigationItem>
</SideNavigation>
</SideNavigationItem>
</SideNavigation>
</SideNavigationGroup>
() => {
const [isCollapsedMenu, setIsCollapsedMenu] = React.useState(false);
const [isOpenMenuGroup, setIsOpenMenuGroup] = React.useState(true);
React.useEffect(() => {
if (isCollapsedMenu) {
setIsOpenMenuGroup(false);
}
}, [isCollapsedMenu]);
React.useEffect(() => {
if (isOpenMenuGroup) {
setIsCollapsedMenu(false);
}
}, [isOpenMenuGroup]);
return (
<CollapsibleSideNavigation
collapsed={isCollapsedMenu}
onCollapseToggle={e => setIsCollapsedMenu(e)}
>
<SideNavigationItem icon={<AddIcon />} href="#bruker">
Opprett bruker
</SideNavigationItem>
<SideNavigationItem icon={<RSSIcon />} href="#nettverk">
Nettverk
</SideNavigationItem>
<SideNavigationItem icon={<SettingsIcon />} href="#innstillinger">
Innstillinger
</SideNavigationItem>
<SideNavigationGroup
title="Andre alternativer"
icon={<MenuIcon />}
open={isOpenMenuGroup}
onToggle={e => setIsOpenMenuGroup(e)}
>
<SideNavigationItem icon={<CalendarIcon />} href="#kalender">
Kalender
</SideNavigationItem>
</SideNavigationGroup>
</CollapsibleSideNavigation>
);
}