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 actions

You may define :actions to display page actions (buttons). The :actions prop accepts array of Action object. The action object is the same as props for <SButton> except :size since the size is fixed to small, and an extra onClick function to handle the click event.

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

const actions = [
  { label: 'Edit title', onClick: () => { /* ... */ } },
  { label: 'About', onClick: () => { /* ... */ } }
]
</script>

<template>
  <SLocalNav :title="title" :actions="actions" />
</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

Avatar

The type of the :avatar prop.

interface Avatar {
  image?: string | null
  name?: string | null
}

Title

The type of the :title prop.

interface Title {
  text: string
  link?: string
}

Action

import { type Component } from 'vue'
import { type Mode, type Tooltip, type Type } from '@globalbrain/sefirot/lib/components/SButton.vue'

export interface Action {
  tag?: string
  type?: Type
  mode?: Mode
  icon?: Component
  leadIcon?: Component
  trailIcon?: Component
  iconMode?: Mode
  label?: string
  labelMode?: Mode
  href?: string
  loading?: boolean
  disabled?: boolean
  tooltip?: string | Tooltip
  onClick?(): void
}

MenuItem

The type of menu item.

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

Props

interface Props {
  avatar?: Avatar
  title: Title[]
  description?: string
  actions?: Action[]
  menu?: MenuItem[][]
}

:avatar

Add avatar image to the local nav.

interface Props {
  avatar?: Avatar
}

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

:title

The title of the page.

interface Props {
  title: Title[]
}

<SLocalNav
  :avatar="{ image: 'path/to/image.jpg', name: 'John Doe' }"
  :title="[{ text: 'Page title' }]"
/>

:description

Add description text under the title.

interface Props {
  description?: string
}

<SLocalNav
  :title="[{ text: 'Page title' }]"
  description="Lorem ipsum..."
/>

:actions

The actions of the page.

interface Props {
  actions: Action[]
}

<SLocalNav
  :title="[{ text: 'Page title' }]"
  :actions="[
    { label: 'Edit title' },
    { label: 'About' }
  ]"
/>

:menu

The menu of the page.

interface Props {
  menu: MenuItem[][]
}

<SLocalNav
  :title="[{ text: 'Page title' }]"
  :menu="[[
    { text: 'Menu item 1', link: '/menu1' },
    { text: 'Menu item 2', link: '/menu2' }
  ]]"
/>