Hopp til innhold
Aksel

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
Github FigmaEndringslogg

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. Les mer om det nye themingsystemet.

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