Navigation menu

A list of links to the pages of your product: a sidebar, or a row of links within one page.

<script setup lang="ts">
import { FsNavigationMenu, type NavigationMenuGroup } from '@fivespark/ui'

const items: NavigationMenuGroup[] = [[
  { label: 'Dashboard', href: '#dashboard', icon: 'layout-dashboard' },
  { label: 'Calculaties', href: '#calculaties', icon: 'calculator', current: true },
  { label: 'Planning', href: '#planning', icon: 'calendar' },
]]
</script>

<template>
  <FsNavigationMenu label="Hoofdmenu" :items class="w-60" />
</template>

Usage

<script setup lang="ts">
import { FsNavigationMenu } from '@fivespark/ui'
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
  <FsNavigationMenu
    label="Hoofdmenu"
    :items="[[
      { label: 'Offertes', to: '/offertes', current: route.path === '/offertes' },
      { label: 'Orders', to: '/orders', current: route.path === '/orders' },
    ]]"
  />
</template>

label names the landmark for screen readers: "Hoofdmenu", without the word "navigatie". You mark the current page yourself with current; the menu does not read your router. Each entry has to or href. For links that open a menu of actions use Dropdown menu; to switch panels on one page use Tabs.

Examples

Groups

Pass groups with their own label to split a long menu in labelled parts. A plain array is an unlabelled group.

<script setup lang="ts">
import { FsNavigationMenu, type NavigationMenuGroup } from '@fivespark/ui'

const items: NavigationMenuGroup[] = [
  { label: 'Verkoop', items: [
    { label: 'Offertes', href: '#offertes', icon: 'file-text', current: true },
    { label: 'Orders', href: '#orders', icon: 'package' },
  ] },
  { label: 'Beheer', items: [
    { label: 'Klanten', href: '#klanten', icon: 'building' },
    { label: 'Instellingen', href: '#instellingen', icon: 'settings' },
  ] },
]
</script>

<template>
  <FsNavigationMenu label="Hoofdmenu" :items class="w-60" />
</template>

Sections

A section with children opens and closes, one level deep. The section holding the current page is open from the start, and count shows a number such as open orders.

<script setup lang="ts">
import { FsNavigationMenu, type NavigationMenuGroup } from '@fivespark/ui'

const items: NavigationMenuGroup[] = [[
  { label: 'Offertes', href: '#offertes', icon: 'file-text' },
  { label: 'Orders', icon: 'package', count: 12, children: [
    { label: 'Open', href: '#open', current: true },
    { label: 'Geleverd', href: '#geleverd' },
  ] },
  { label: 'Planning', icon: 'calendar', children: [
    { label: 'Deze week', href: '#week' },
    { label: 'Monteurs', href: '#monteurs' },
  ] },
]]
</script>

<template>
  <FsNavigationMenu label="Hoofdmenu" :items class="w-60" />
</template>

Horizontal

A single group of links, without icons or sections, for the views of one record. A long row scrolls sideways.

<script setup lang="ts">
import { FsNavigationMenu, type NavigationMenuGroup } from '@fivespark/ui'

const items: NavigationMenuGroup[] = [[
  { label: 'Regels', href: '#regels', current: true },
  { label: 'Documenten', href: '#documenten' },
  { label: 'Facturen', href: '#facturen', count: 3 },
]]
</script>

<template>
  <FsNavigationMenu label="Contract 2026-041" orientation="horizontal" :items class="w-full max-w-md" />
</template>

Dense

<script setup lang="ts">
import { FsNavigationMenu, type NavigationMenuGroup } from '@fivespark/ui'

const items: NavigationMenuGroup[] = [[
  { label: 'Offertes', href: '#offertes', icon: 'file-text', current: true },
  { label: 'Orders', href: '#orders', icon: 'package' },
  { label: 'Klanten', href: '#klanten', icon: 'building' },
]]
</script>

<template>
  <FsNavigationMenu label="Hoofdmenu" size="dense" :items class="w-60" />
</template>

Keyboard

Key	Does
Tab, Shift + Tab	Moves through every link and section button in order
Enter, Space	Opens or closes a section
Enter	Follows a link

API Reference

FsNavigationMenu

Prop	Type	Default	Description
label	string	required	The landmark's name, never shown, without the word "navigation": "Hoofdmenu", "Contract 2026-041". Unique among the page's landmarks.
items	NavigationMenuGroup[]	required	The groups of links and sections, in order; the consumer marks the current link. A horizontal menu takes one group of links.
orientation	"vertical" | "horizontal"	"vertical"	`vertical` for a sidebar; `horizontal` for a row of a few sibling pages.
size	"default" | "dense"	"default"	`default` is 36px high; `dense` is 32px.