SidebarNav

Vertical nav list

A site's section list down the side — the pages of a manual, the sections of an official site. On phones it usually moves into a Drawer.

Basic

• Home
• News 04.04NEW!
• On Air
• Story
• Character
• Staff & Cast
• Music
• Blu-ray & DVD BOX
• Shop

<script setup lang="ts">
import { ref } from "vue";
import { BlessSidebarNav } from "blessing-ui";
import { navItems } from "./_nav";
const active = ref("#news");
</script>

<template>
  <div style="max-width: 220px">
    <BlessSidebarNav
      :items="navItems"
      :active
      @select="
        (i, e) => {
          if (!i.external) {
            e.preventDefault();
            active = i.href;
          }
        }
      "
    />
  </div>
</template>

• Links go through your router when one is provided; active marks the current page (aria-current="page"); external keeps a link a plain <a>.
• meta adds a dated line after a dash; badge: true shows NEW!.

Usage

import { BlessSidebarNav } from "blessing-ui";

API

Props

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

Events

Name	Payload	Description
select	[item: BlessNavItem, event: MouseEvent]

Slots

Name	Scope	Description
item	{ item: BlessNavItem; }