LinkList

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

LinkList lister ut et sett med linker for brukeren. Den brukes primært til navigasjon, men kan også brukes for nedlasting av filer.

Egnet til:

Gruppering av linker for videre navigasjon
Gruppering av filer for nedlasting
Gruppering av eksterne linker
Eller en kombinasjon av de tre over

Uegnet til:

Trigge en handling, bruk knapper det til dette
Linker med mye tekst - bruk heller Cards eller Link til dette

Relaterte komponenter

Link

Varianter

Link

Brukes primært for å lenke til undersider i navigasjonshierarkiet (se breadcrumb). Lenker med pil slik som denne varianten brukes kun til internlenking under obos domenet.

<LinkList className="w-full">
  <LinkListItem>
    <UNSAFE_Link href="/bolig">Bolig</UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link href="/bank">Bank</UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link href="/medlem">Medlem</UNSAFE_Link>
  </LinkListItem>
</LinkList>

Download

Brukes til en liste med nedlasting, om denne skal brukes sammen med andre varianter av LinkList, pass på at en gjør det tydelig for brukeren

<LinkList className="w-full">
  <LinkListItem>
    <UNSAFE_Link download href="/">
      Medlemsvilkår
    </UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link download href="/about">
      Samtykke
    </UNSAFE_Link>
  </LinkListItem>
</LinkList>

External

Brukes til eksterne lenker til domener utenfor obos.

<LinkList className="w-full">
  <LinkListItem>
    <UNSAFE_Link href="https://minside.obosnett.no/login" rel="external">
      OBOS Nett - Min side
    </UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link
      href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
      rel="external noopener noreferrer"
      target="_blank"
    >
      Les mer om trygg forsikring
    </UNSAFE_Link>
  </LinkListItem>
</LinkList>

Komposisjon

Det er mulig å sette inn overskrifter på en LinkList ved å bruke komponenten <Heading>. Disse kan være lenker av alle varianter listet over, men trenger ikke å være en lenke.

<div className="grid gap-y-8 w-full">
  <LinkListContainer>
    <Heading level={2}>
      <UNSAFE_Link href="/om">OBOS</UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="/bolig">Bolig</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/bank">Bank</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/medlem">Medlem</UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <UNSAFE_Link href="/om" rel="external">
        OBOS EXTERN
      </UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="https://minside.obosnett.no/login" rel="external">
          OBOS Nett - Min side
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link
          href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
          rel="external noopener noreferrer"
          target="_blank"
        >
          Les mer om trygg forsikring
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <UNSAFE_Link
        download
        href="https://cdn.sanity.io/files/tq6w17ny/prod/f39b489e6ba82e03036e735be0a99320e12214d0.pdf"
      >
        Årsrapport
      </UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/4982d7ca3f4cef8f8bd7de42ea58a0d2c9fa3760.pdf"
        >
          Klimarisikorapport
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/74ee591acb8e2f4abe7e19fe6a753abe51a48c68.pdf"
        >
          Klimagassberegning
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>2 items</Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link download href="/">
          Medlemsvilkår
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link download href="/about">
          Samtykke
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
</div>

Ved å wrappe LinkList i en <LinkListContainer> får du også automatisk inndeling i kolonner basert på hvor mange <LinkListItem> LinkList har:

<div className="grid gap-y-8 w-full">
  <LinkListContainer>
    <Heading level={2}>2 items</Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link download href="/">
          Medlemsvilkår
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link download href="/about">
          Samtykke
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>15 items</Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="/konsernledelsen">Konsernledelsen</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/styret">Styret</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/representantskapet">
          Representantskapet
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/boligpriser-og-statistikk">
          Boligpriser og statistikk
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/investor-relations">
          Investor Relations
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/digital-arsrapport">
          Digital årsrapport
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/jobb-i-obos">Jobb i OBOS</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/presse">Presse</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/logoer">Logoer</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/obos-boligkonferanse">
          OBOS Boligkonferanse
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/obos-ligaen">OBOS-ligaen</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/datterselskaper">Datterselskaper</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/vedtekter">Vedtekter</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/generalforsamlingen-i-obos">
          Generalforsamlingen i OBOS
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/strategi-og-styrende-dokumenter">
          Strategi og styrende dokumenter
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
</div>

Props

LinkList

Prop	Description	Default
`id?`		-

LinkListItem

Prop	Description	Default
`id?`		-

Link

Prop	Description	Default
`animateIcon?`		-
`autoFocus?`		-
`isDisabled?`	Whether the link is disabled.	-
`children?`		-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Links
`referrerPolicy?`		-
`rel?`		-
`href?`		-
`target?`		-
`hrefLang?`		-
`download?`		-
`ping?`		-
`routerOptions?`		-
Styles
`className?`		'react-aria-Form'
`style?`		-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

Heading

Prop	Description	Default
`id?`		-
`size?`	The visual text size of the heading	-
`level`	The semantic level of the heading	-