Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

InternalHeader

Oppdatert 4. august 2023Interne flaterStabil
Figma

    Intro

    Internal Header samler handlinger og overordnet navigasjon for interne systemer. Handlingene som tilbys bestemmes av hvert enkelt internt system.

    Egnet til:

    • Bruk på interne flater
    • Saksbehandlingssystemer og utgangspunkt for andre interne løsninger

    Uegnet til:

    • Løsninger som bor på eksterne sider

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Retningslinjer

    System menu

    System-menyen inneholder lenker til andre fagsystemer og oppslagsverk. Meny-lenkene åpnes i nytt nettleservindu slik at saksbehandler kan fortsette å forholde seg til det systemet som er aktivt. Det er opp til det enkelte team hvor mange lenker de fyller den med. Overflow punktet er satt ved 550px høyde, når menyen oppnår denne høyden vil en scrollbar oppstå slik at menyen ikke blir altfor høy.

    System menu intern header
    System menu intern header

    Username-dropdown

    Ved å klikke på brukernavnet åpnes et dropdown element som viser brukers fulle navn, identnummer samt en lenke for å logge ut av systemet. Teamene avgjør selv om de vil introdusere mer informasjon i denne konteksten.

    User name dropdown intern header
    User name dropdown intern header

    Tilgjengelighet

    Tastaturinteraksjon

    Her er de mest vanligste kombinasjonene.

    KommandoInteraksjon
    TabFlytter fokus det neste interaktive elementet
    Shift+TabFlytter fokus det forrige interaktive elementet
    Space/EnterInteragere med elementer

    Props

    InternalHeader

    className? string
    ref? Ref<HTMLElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    InternalHeader extends HTMLElement

    InternalHeader.Button

    as? React.ElementType
    OverridableComponent-api
    children ReactNode
    Application Button
    className? string
    ref? Ref<HTMLButtonElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    InternalHeader.Button extends HTMLButtonElement

    InternalHeader.Title

    as? React.ElementType
    OverridableComponent-api
    children ReactNode
    Application title
    className? string
    ref? Ref<HTMLAnchorElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    InternalHeader.Title extends HTMLAnchorElement

    InternalHeader.User

    name string
    User name
    description? string
    User description
    className? string
    ref? Ref<HTMLDivElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    InternalHeader.User extends HTMLDivElement

    InternalHeader.UserButton

    as? React.ElementType
    OverridableComponent-api
    name string
    User name
    description? string
    User description
    className? string
    ref? Ref<HTMLButtonElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    InternalHeader.UserButton extends HTMLButtonElement

    Tokens

    TokenFallback
    --ac-internalheader-bg--a-surface-inverted
    --ac-internalheader-divider--a-gray-600
    --ac-internalheader-text--a-text-on-inverted
    --ac-internalheader-hover-bg--a-surface-inverted-hover
    --ac-internalheader-active-bg--a-surface-inverted-active
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack