Components
Navigation Menu
NavigationMenu, dressed in the paper-and-ink system: a menubar of ghost triggers with one sliding stroke of primary ink, opening the shared popup vessel. The parts — Root, List, Item, Trigger, Link, Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow.
#Basic usage
<script setup lang="ts">
import { NavigationMenu } from "@bysages/vue";
</script>
<template>
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item value="overview">
<NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>
<NavigationMenu.Content>
<span class="block px-(--bs-padding-md) pb-1 pt-2 text-xs tracking-label text-tertiary">
Get started
</span>
<NavigationMenu.Link href="#quick-start">
<span class="flex flex-col gap-1">
<strong>Quick start</strong>
<span class="text-secondary text-sm"> Install and assemble </span>
</span>
</NavigationMenu.Link>
<NavigationMenu.Link href="#styling">
<span class="flex flex-col gap-1">
<strong>Styling</strong>
<span class="text-secondary text-sm"> Tokens, hairlines, light </span>
</span>
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="#guides" :current="true">Guides</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Item value="resources">
<NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
<NavigationMenu.Content>
<span class="block px-(--bs-padding-md) pb-1 pt-2 text-xs tracking-label text-tertiary">
Learn
</span>
<NavigationMenu.Link href="#accessibility">
<span class="flex flex-col gap-1">
<strong>Accessibility</strong>
<span class="text-secondary text-sm"> Contrast and density tiers </span>
</span>
</NavigationMenu.Link>
<NavigationMenu.Link href="#releases">
<span class="flex flex-col gap-1">
<strong>Releases</strong>
<span class="text-secondary text-sm"> What settled into the paper </span>
</span>
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport />
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
<script setup lang="ts">
import { NavigationMenu } from "@bysages/vue";
const features = [
{ title: "Tokens", copy: "Palettes and tiers on one ramp" },
{ title: "Lighting", copy: "Elevation computed from the source" },
{ title: "Motion", copy: "Ink bleeds, puppets keep strings" },
{ title: "Density", copy: "Whitespace scales, type holds" },
];
</script>
<template>
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item value="platform">
<NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
<NavigationMenu.Content>
<div class="grid grid-cols-2 gap-2 p-4">
<div v-for="feature in features" :key="feature.title" class="p-2">
<strong class="mb-1 block text-sm">{{ feature.title }}</strong>
<span class="text-sm text-secondary">{{ feature.copy }}</span>
</div>
</div>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link href="#docs">Docs</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport />
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
#Props
#Arrow
A styled part — no props of its own; it takes the anatomy's shared styling.
#Content
A styled part — no props of its own; it takes the anatomy's shared styling.
#Indicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#ItemIndicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#Item
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | Whether the item is disabled | |
value | string | The value of the item |
#Link
A styled part — no props of its own; it takes the anatomy's shared styling.
#List
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
closeDelay | number | 300 | The delay before the menu closes |
defaultValue | string | The default value of the navigation menu. Use when you don't want to control the value of the menu. | |
disableClickTrigger | boolean | Whether to disable the click trigger | |
disableHoverTrigger | boolean | Whether to disable the hover trigger | |
disablePointerLeaveClose | boolean | Whether to disable the pointer leave close | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; list: string; item: string; trigger: (value: string) => string; content: (value: string) => string; viewport: string; }> | The ids of the elements in the machine. | |
openDelay | number | 200 | The delay before the menu opens |
orientation | 'horizontal' | 'vertical' | "horizontal" | The orientation of the navigation menu |
translations | navigationMenu.IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states | |
value | string | The controlled value of the navigation menu |
#Trigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#ViewportPositioner
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | Placement of the viewport for css variables (--viewport-x, --viewport-y). @defaultValue 'center' |
#Viewport
A styled part — no props of its own; it takes the anatomy's shared styling.