A wide site's navigation, where a section has more in it than a row can hold: columns of links under a heading, opened from the bar.
Import it from rei-kit/web:
import { MegaMenu } from 'rei-kit/web'
Open MegaMenu in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { MegaMenu } from 'rei-kit/web'
/**
* A top-level item with `columns` opens a panel; one with only `to` is a
* plain link. Both live in the same bar.
*/
const items = [
{
key: 'products',
label: 'Products',
columns: [
{
key: 'apps',
title: 'Apps',
links: [
{ key: 'journal', to: '/journal', label: 'Journal', description: 'A day at a time' },
{ key: 'ledger', to: '/ledger', label: 'Ledger', description: 'Where the money went' },
],
},
{
key: 'developers',
title: 'Developers',
links: [
{ key: 'kit', to: '/kit', label: 'Component kit' },
{ key: 'api', to: '/api', label: 'API' },
],
},
],
},
{ key: 'pricing', label: 'Pricing', to: '/pricing' },
]
</script>
<template>
<MegaMenu :items="items" active="pricing" label="Main navigation">
<!-- A slot named for a top-level item adds to that panel. -->
<template #products>
<p class="text-ink-soft mt-4 text-xs">Everything is free while it is in beta.</p>
</template>
</MegaMenu>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
items | readonly MegaMenuItem<K>[] | yes | |
active | K | undefined | Which section is current. Usually derived from the route. |
label | string | '' | Accessible name for the navigation landmark. |
openOnHover | boolean | true | Whether a pointer opens a panel as well as a click. |
hoverDelay | number | 120 | How long the pointer has to leave before the panel closes, in ms. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.