Gå til hovedinnhold
KOMPONENTER

Side navigation

npmv4.2.19

Side navigation brukes som en global meny for å vise et navigasjons-hierarki med ett til to nivåer.

npm install @entur/menu
@import '@entur/menu/dist/styles.css';

Komponenter

SideNavigation

import { SideNavigation } from '@entur/menu';
NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

size?"small" | "medium" 'medium'

Størrelse på menyen

<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

import { SideNavigationItem } from '@entur/menu';
NavnTypeBeskrivelse
active?boolean

Om meny-elementet er det som er aktivt

as?string | React.ElementType

HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.

className?string

Ekstra klassenavn

disabled?boolean

Om meny-elementet er deaktivert

onClick?((e: MouseEvent<Element, MouseEvent>) => any)

Callback for når man klikker på meny-elementet

forceExpandSubMenus?boolean

Sett til true om du vil tvinge alle sub-menus til å rendre barna sine. Typisk for å vise søkeresultater

icon?ReactNode

<SideNavigationItem /> er et menypunkt, og er typisk en lenke. De kan inneholde en label, eller en sub-meny.

SideNavigationGroup

import { SideNavigationGroup } from '@entur/menu';
NavnTypeDefault-verdiBeskrivelse
defaultOpen?boolean false

Skal menygruppen være ekspandert by default? Kun relevant om komponenten ikke er kontrollert

open?boolean

Er menyen åpen?

onToggle?((e?: boolean ) => void)

Kalles når menygruppen åpnes eller lukkes

className?string

Ekstra klassenavn

children?ReactNode

Menyen som skal grupperes

titleReactNode

Overskriften til menyen

icon?ReactNode

<SideNavigationGroup /> brukes til å gruppere deler av menyen sammen.

CollapsibleSideNavigation

import { CollapsibleSideNavigation } from '@entur/menu';
NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

size?"small" | "medium" 'medium'

Størrelse på menyen

collapsed?boolean false

Tilstand til menyen

onCollapseToggle?((e: any) => void)

Kalles når menyen åpnes eller lukkes

collapsibleButtonPosition?string 50%

Posisjonen til Collapsible-knappen, målt fra toppen (som CSS-enhet)

openSideMenuAriaLabel?string "Åpne sidemeny"

Aria-label for knappen som åpner menyen

closeSideMenuAriaLabel?string "Lukk sidemeny"

Aria-label for knappen som lukker menyen

Variasjoner

Meny med ikoner

Compact side navigation

Compact side navigation med ikoner

Gruppert meny

Gruppert kompakt meny

Collapsible side nagivation

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 for bruk

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.

Rediger denne siden på Bitbucket