SLocalNav

<SLocalNav> determines the top level navigation for a specific page.

Import

import SLocalNav from '@globalbrain/sefirot/lib/components/SLocalNav.vue'

Usage

The only required props is :title. The most basic local nav that contains only the title can be defined as follows.

The :title prop accepts array of title object. This is because title could have link, and also it can be a breadcrumb as shown at later section.

<script setup lang="ts">
const title = [
  { text: 'Page title' }
]
</script>

<template>
  <SLocalNav :title="title" />
</template>

Page breadcrumbs

You may pass multiple title objects as an array to :title prop to render breadcrumbs. Usually, except for the latest one, each title object should have link set.

<script setup lang="ts">
const title = [
  { text: 'Parent page', link: '/parent' },
  { text: 'Current page' }
]
</script>

<template>
  <SLocalNav :title="title" />
</template>

Page navigation

You may define :menu to display a page navigation. The :menu props accepts "double nested" array, in order to create grouping of menu items.

<script setup lang="ts">
const title = [
  { text: 'Page title' },
]

const menu = [
  [
    { text: 'Menu item 1', link: '/menu1' },
    { text: 'Menu item 2', link: '/menu2' },
  ],
  [
    { text: 'Menu item 3', link: '/menu3' },
    { text: 'Menu item 4', link: '/menu4' },
  ],
]
</script>

<template>
  <SLocalNav :title="title" :menu="menu" />
</template>

Types

Title

The type of the :title prop.

interface Title {
  text: string
  link?: string
}

MenuItem

The type of menu item.

import { type IconifyIcon } from '@iconify/vue/dist/offline'

interface MenuItem {
  icon?: IconifyIcon
  text: string
  link: string
  active?: boolean
}

Props

interface Props {
  title: Title[]
  menu?: MenuItem[][]
}

:title

The title of the page.

interface Props {
  title: Title[]
}

<SLocalNav :title="[{ text: 'Page title' }]" />

:menu

The menu of the page.

interface Props {
  menu: MenuItem[][]
}

<SLocalNav :title="[{ text: 'Page title' }]" />