NavigationMenu

Horizontal nav with panels

A site's top navigation, where some entries open a panel of links. It's navigation, not commands: for an app's File / Edit menus use Menubar; on phones, BottomTabs or a Drawer.

Basic

• Home
• News

<script setup lang="ts">
import { BlessNavigationMenu, useToast } from "blessing-ui";
const { toast } = useToast();
const items = [
  { label: "Home", href: "#", active: true },
  {
    label: "Heroines",
    items: [
      { label: "加藤恵", href: "#megumi", description: "メインヒロイン" },
      { label: "英梨々", href: "#eriri", description: "幼馴染・イラスト担当" },
      { label: "詩羽", href: "#utaha", description: "先輩・シナリオ担当" },
      { label: "美智留", href: "#michiru", description: "従姉・音楽担当" },
    ],
  },
  {
    label: "Media",
    items: [
      { label: "Blu-ray & DVD", href: "#bd" },
      { label: "Music", href: "#music" },
      { label: "Books", href: "#books" },
    ],
  },
  { label: "News", href: "#news" },
];
</script>

<template>
  <BlessNavigationMenu
    :items
    @select="
      (i, e) => {
        e.preventDefault();
        toast(i.label);
      }
    "
  />
</template>

• Entries with items open a panel: on hover with a mouse, on tap on touch screens, and with Enter, Space or ↓ from the keyboard (focus moves into the panel). ← / → move between entries.
• Esc closes the panel and returns focus to its entry; tabbing out of it closes it too.
• active marks the current section (aria-current="page"); #panel replaces the panel's links with your own layout.

Usage

import { BlessNavigationMenu } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessNavMenuItem[]	—
label	string	"Main"

Events

Name	Payload	Description
select	[item: { label: string; href: string; }, e: MouseEvent]

Slots

Name	Scope	Description
panel	{ item: BlessNavMenuItem; }