Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

InternalHeader

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

StabilOppdatert 16. juni 2025

Egnet til:

  • Bruk på interne flater
  • Navigasjon

Uegnet til:

  • Eksterne flater

Eksempler

Retningslinjer

App-meny

App-menyen inneholder lenker til andre fagsystemer og oppslagsverk. Lenkene åpnes i ny fane slik at systemet man er i ikke lukkes. Det er opp til det enkelte team hvor mange lenker de fyller den med. Se eksempel "App-meny".

Brukermeny

Ved å klikke på brukernavnet åpnes en meny 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. Se eksempel "Brukermeny".

Både app switcher og brukermeny bruker Dropdown.

Props

InternalHeader

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

    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). React Docs

InternalHeader.Button

children

  • Type:
    ReactNode
  • Description:

    Application Button

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    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). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

InternalHeader.Title

children

  • Type:
    ReactNode
  • Description:

    Application title

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

    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). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

InternalHeader.User

name

  • Type:
    string
  • Description:

    User name

description?

  • Type:
    string
  • Description:

    User description

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs

InternalHeader.UserButton

name

  • Type:
    string
  • Description:

    User name

description?

  • Type:
    string
  • Description:

    User description

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    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). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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