Sidolänk, Navlänk

Storybook

Navigation

Navigationskomponenterna används både i Sidebar och i Navbar. De är identiska — kontexten avgör utseendet.

Navigation

Wrapper-komponent som renderar ett <nav>-element med <ul> inuti. Stödjer både statisk och dynamisk rendering via Collections.

import { Navigation, NavigationItem, NavigationLink } from '@midas-ds/layout'
import { House, Settings } from 'lucide-react'

export default function App() {
  const pathname = usePathname() // or equivalent for your router

  return (
    <Navigation>
      <NavigationItem>
        <NavigationLink
          href='/'
          icon={<House />}
          isActive={pathname === '/'}
        >
          Hem
        </NavigationLink>
      </NavigationItem>
      <NavigationItem>
        <NavigationLink
          href='/installningar'
          icon={<Settings />}
          isActive={pathname === '/installningar'}
        >
          Inställningar
        </NavigationLink>
      </NavigationItem>
    </Navigation>
  )
}

NavigationLink

En enskild länk med ikon, etikett och aktivt läge. Anpassar sig automatiskt efter om den befinner sig i en Sidebar eller Navbar.

<NavigationLink
  href='/mina-arenden'
  icon={<FileText />}
  isActive={pathname === '/mina-arenden'}
>
  Mina ärenden
</NavigationLink>

Props

Prop	Typ	Standard	Beskrivning
icon	ReactNode	—	Obligatorisk. Ikon för länken
children	ReactNode	—	Etikett (visas i sidebar, används som tooltip i kollapsad sidebar)
isActive	boolean	false	Markerar länken som aktiv sida
href	string	—	URL (standard)
as	ElementType	—	Ersättningskomponent (t.ex. Next.js Link)
aria-label	string	—	Krävs om children inte är ren text

Notisindikator (Badge)

Skicka in BadgeContainer som icon-prop för att visa en notisindikator på länken.

12Meddelanden

import { Badge, BadgeContainer } from '@midas-ds/components'
import { Bell } from 'lucide-react'

<NavigationItem>
  <NavigationLink
    href='/meddelanden'
    icon={
      <BadgeContainer>
        <Bell />
        <Badge>12</Badge>
      </BadgeContainer>
    }
    isActive={pathname === '/meddelanden'}
  >
    Meddelanden
  </NavigationLink>
</NavigationItem>

NavigationSection

Grupperar navigeringslänkar under en valfri rubrik.

import { Navigation, NavigationItem, NavigationLink, NavigationSection } from '@midas-ds/layout'
import { FileText, House, Plus } from 'lucide-react'

<Navigation>
  <NavigationItem>
    <NavigationLink
      href='/'
      icon={<House />}
    >
      Hem
    </NavigationLink>
  </NavigationItem>
  <NavigationSection title='Ansökan'>
    <NavigationItem>
      <NavigationLink
        href='/ny-ansokan'
        icon={<Plus />}
      >
        Ny ansökan
      </NavigationLink>
    </NavigationItem>
    <NavigationItem>
      <NavigationLink
        href='/mina-arenden'
        icon={<FileText />}
      >
        Mina ärenden
      </NavigationLink>
    </NavigationItem>
  </NavigationSection>
</Navigation>

NavigationSubMenu

Nästlad undermeny för hierarkisk navigationsstruktur.

<NavigationSection title='Administration'>
  <NavigationSubMenu>
    <NavigationItem>
      <NavigationLink
        href='/anvandare'
        icon={<Users />}
      >
        Användare
      </NavigationLink>
    </NavigationItem>
    <NavigationItem>
      <NavigationLink
        href='/roller'
        icon={<Shield />}
      >
        Roller
      </NavigationLink>
    </NavigationItem>
  </NavigationSubMenu>
</NavigationSection>

Routing

NavigationLink hanterar navigering och aktivt läge via href och isActive. I en applikation med client-side routing måste dessa kopplas ihop med din router — utan det fungerar inte det aktiva läget och användaren ser aldrig vilken sida hen är på.

Skapa en wrapper-komponent som sköter kopplingen. Här är ett exempel med React Router:

NavLink.tsx

import { Link, useMatch } from 'react-router'
import { NavigationLink } from '@midas-ds/layout'

type NavLinkProps = {
  path: string
  icon: React.ReactNode
  children: React.ReactNode
}

export function NavLink({ path, icon, children }: NavLinkProps) {
  const match = useMatch(path)
  return (
    <NavigationLink
      as={Link}
      to={path}
      icon={icon}
      isActive={!!match}
    >
      {children}
    </NavigationLink>
  )
}

<NavLink path='/mina-arenden' icon={<FileText />}>
  Mina ärenden
</NavLink>

Samma mönster fungerar med andra routrar — byt ut Link och useMatch mot motsvarande för din router, t.ex. usePathname + jämförelse i Next.js eller useMatchRoute i TanStack Router.

Dynamisk rendering

Alla navigationskomponenter stödjer React Arias Collection API för dynamisk rendering från data. Nedan följer ett exempel med submenyer och rekursiv rendering.

import { Navigation, NavigationItem, NavigationLink, NavigationSection, NavigationSubMenu } from '@midas-ds/layout'
import { Bell, FileText, House, Plus, Save, User } from 'lucide-react'

type Section = {
  id: number
  title?: string
  children: Item[]
}

type Item = {
  id: number
  title: string
  href: string
  icon: React.ReactNode
  children?: Item[]
}

const sections: Section[] = [
  {
    id: 0,
    children: [
      {
        id: 1,
        title: 'Home',
        href: '/',
        icon: <House />,
      },
      {
        id: 2,
        title: 'Applications',
        href: '/applications',
        icon: <FileText />,
        children: [
          {
            id: 3,
            title: 'New application',
            href: '/applications/new',
            icon: <Plus />,
          },
          {
            id: 4,
            title: 'Drafts',
            href: '/applications/drafts',
            icon: <Save />,
          },
        ],
      },
    ],
  },
  {
    id: 5,
    title: 'Account',
    children: [
      {
        id: 6,
        title: 'Profile',
        href: '/profile',
        icon: <User />,
      },
      {
        id: 7,
        title: 'Notifications',
        href: '/notifications',
      },
    ],
  },
]

export default function App() {
  return (
    <Navigation items={sections}>
      {section => (
        <NavigationSection
          title={section.title}
          items={section.children}
        >
          {function renderItem(item) {
            return (
              <NavigationItem>
                <NavigationLink
                  href={item.href}
                  icon={item.icon}
                >
                  {item.title}
                </NavigationLink>
                <NavigationSubMenu items={item.children}>{renderItem}</NavigationSubMenu>
              </NavigationItem>
            )
          }}
        </NavigationSection>
      )}
    </Navigation>
  )
}