Side navigation brukes som en global meny for å vise et navigasjons-hierarki med ett til to nivåer.
<SideNavigation><SideNavigationItemhref="#menyer"active> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigation><SideNavigationItemactive={true}href="#"> Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation>
Varianter
SideNavigation
<SideNavigation /> beskriver en meny, både på øverste nivå, eller som barn av et <SideNavigationItem />. De kan være store eller små, og brukes inni en <SideNavigationGroup /> eller som en standalone meny.
<SideNavigationItem /> er et menypunkt, og er typisk en lenke. De kan inneholde en label, eller en sub-meny.
<SideNavigationGroup /> brukes til å gruppere deler av menyen sammen.
Eksempler
Meny med ikoner
<SideNavigation><SideNavigationItemactive={true}href="#"><UserIconaria-hidden="true"/> Min konto</SideNavigationItem><SideNavigationItemdisabled={true}><StatsIconaria-hidden="true"/> Statistikk</SideNavigationItem><SideNavigationItemhref="#"><SettingsIconaria-hidden="true"/> Innstillinger</SideNavigationItem></SideNavigation>
Compact side navigation
<SideNavigationsize="small"><SideNavigationItemhref="#menyer"active={true}> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigationsize="small"><SideNavigationItemhref="#">Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation>
Compact side navigation med ikoner
<SideNavigationsize="small"><SideNavigationItemactive={true}href="#"><UserIconaria-hidden="true"/> Min konto</SideNavigationItem><SideNavigationItemdisabled={true}><StatsIconaria-hidden="true"/> Statistikk</SideNavigationItem><SideNavigationItemhref="#"><SettingsIconaria-hidden="true"/> Innstillinger</SideNavigationItem></SideNavigation>
Gruppert meny
<SideNavigationGrouptitle="En gruppe"><SideNavigation><SideNavigationItemhref="#menyer"active={true}> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigation><SideNavigationItemhref="#">Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation></SideNavigationGroup><SideNavigationGrouptitle="Enda en gruppe"><SideNavigation><SideNavigationItemhref="#menyer"active={true}> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigation><SideNavigationItemhref="#">Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation></SideNavigationGroup>
Gruppert kompakt meny
<SideNavigationGrouptitle="En gruppe"defaultOpen={true}><SideNavigationsize="small"><SideNavigationItemhref="#menyer"active={true}> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigationsize="small"><SideNavigationItemhref="#">Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation></SideNavigationGroup><SideNavigationGrouptitle="Enda en gruppe"defaultOpen={true}><SideNavigationsize="small"><SideNavigationItemhref="#menyer"active={true}> Toppen</SideNavigationItem><SideNavigationItemas="button"type="button"onClick={()=>alert('Hei på deg')}> Si hei</SideNavigationItem><SideNavigationItemdisabled={true}>Utilgjengelig</SideNavigationItem><SideNavigationItem> Andre alternativer<SideNavigationsize="small"><SideNavigationItemhref="#">Sparkesykkel</SideNavigationItem><SideNavigationItemdisabled={true}>Ski</SideNavigationItem></SideNavigation></SideNavigationItem></SideNavigation></SideNavigationGroup>
Bruk collapisibleButtonPosition for plasseringen av collapse-knappen ift toppen av sidemenyen. Eksempel 2rem, 25% og lignende.
Obs: Husk og inkluder icon-propen for alle menypunktene.
Retningslinjer
Side navigation er anbefalt å brukes hvis applikasjonen krever en global
navigasjon, og inneholder mer enn fem sider. Navigasjonsmønsteret støtter
opptil to nivåer av navigasjon (Nivå 1 og Nivå 2), men det er ikke nødvendig
for hvert navigasjonselement å ha samme antall navigasjonsnivåer. Ytterligere
et nivå over dette kan legges til ved å benytte
Top navigation
i tillegg. Konvensjonen for denne typen menystruktur er å vise den på venstre
side. Hvis du har færre en 3 menypunkter i navigasjonen, vurder heller å bruk
en
Top navigation.
Variasjoner
Side navigation komponenten finnes både med og uten ikon.
Ikoner på et MenuItem skal kun benyttes på nivå 1. Komponenten er tilgjengelig i normal og kompakt versjon.
Den kompakte versjonen er utviklet for å tilby enkel oversikt og unngå overdreven scrolling hos våre proffbrukere,
nå som mange av Enturs applikasjoner har fått mer innhold.
Noen applikasjoner kan trenge en mer avansert menystruktur. I de tilfellene kan man bruke MenuGroups til å gruppere menyvalg sammen.
Idéen med disse er å kunne tilby en logisk strukturering og forenkle navigasjon i et ellers uoversiktlig innhold.
Menygruppene kan kollapses, men man kan selv velge om alle (eller noen av dem) skal være åpne til å begynne med.
Hver menygruppe skal helst kun ha ett nivå under seg; unngå nøstede undermenyer i menygruppen.
Inaktive elementer
Om man ønsker å synliggjøre at en lenke finnes, men er utilgjengelig av en eller annen grunn,
kan man gjøre et menyelement "disabled". Dette er noe man helst ikke skal gjøre,
siden det ikke er noen god måte å fortelle brukeren hvorfor elementet ikke er tilgjengelig for dem.
Vurder heller å fjerne elementet fra listen.
