Hoppa till huvudinnehåll

Navbar

Navigationsbar, Mobilnavigering
Storybook

Navigationskomponent som ligger längst ned på sidan och är gjord för att likna navigationen i native mobilappar. Navbar renderar ett semantiskt <footer>-element.

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

export const Example = () => {
  return (
    <Navbar>
      <Navigation>
        <NavigationItem>
          <NavigationLink
            href='/'
            icon={<House />}
            isActive
          >
            Hem
          </NavigationLink>
        </NavigationItem>
        <NavigationItem>
          <NavigationLink
            href='/sok'
            icon={<Search />}
          >
            Sök
          </NavigationLink>
        </NavigationItem>
        <NavigationItem>
          <NavigationLink
            href='/profil'
            icon={<User />}
          >
            Profil
          </NavigationLink>
        </NavigationItem>
      </Navigation>
    </Navbar>
  )
}

Navbar visas endast på skärmar smalare än 640px. Förminska webbläsarfönstret för att se exemplet.

Användning​

Syftet med Navbar är att få applikationen att likna en native mobilapp, som oftast har navigation i botten av appen. Navbar ska inte användas samtidigt som MobileMenu, utan Navbar används som den enda navigationen på små skärmar. Navbar kan användas tillsammans med Sidebar — båda döljer sig automatiskt beroende på skärmstorlek, så inkludera båda i trädet och låt dem ta hand om responsiviteten själva.

Använd Navbar:​

  • När applikationen ska upplevas som en mobilapp på små skärmar.

Använd inte Navbar:​

  • Om applikationen behöver mer än 5 menyalternativ i navigationen, eftersom det gör det för trångt på små skärmar.
  • Om applikationen behöver undermenyer eller komplex navigering.
  • Tillsammans med MobileMenu. Navbar ersätter MobileMenu på små skärmar.

Implementation​

Exempel på användning i en layout​

Detta kodexempel visar hur Navbar kan användas tillsammans med Sidebar i en layout.

<Layout>
  <Header>...</Header>
  <LayoutContent>
    <Sidebar>
      <Navigation>{/* Navigering på stora skärmar */}</Navigation>
    </Sidebar>
    <Main>...</Main>
  </LayoutContent>

  <Navbar>
    <Navigation>{/* Navigering på mobil/små skärmar */}</Navigation>
  </Navbar>
</Layout>