Morpheme

Appearance

Navbar ​

Navigation bar.

WARNING

This component is deprecated. You can replace it with the new VAppBar.

Usage ​

Basic Usage ​

vue
<template>
  <VNavbar />
</template>
<template>
  <VNavbar />
</template>

INFO

The VNavbar component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Small ​

vue
<template>
  <VNavbar small />
</template>
<template>
  <VNavbar small />
</template>

User Data ​

vue
<script setup lang="ts">
const user = {name: 'Admin'};
</script>

<template>
  <VNavbar :user="user" />
</template>
<script setup lang="ts">
const user = {name: 'Admin'};
</script>

<template>
  <VNavbar :user="user" />
</template>

With Menus ​

vue
<script setup lang="ts">
const menus = [
  {
    text: 'Home',
    to: '/',
  },
  {
    text: 'Settings',
    to: '/',
    children: [
      {
        text: 'Profile',
        to: '/profile',
      },
      {
        text: 'Account',
        to: '/account',
      },
    ],
  },
];
</script>

<template>
  <VNavbar :menus="menus" />
</template>
<script setup lang="ts">
const menus = [
  {
    text: 'Home',
    to: '/',
  },
  {
    text: 'Settings',
    to: '/',
    children: [
      {
        text: 'Profile',
        to: '/profile',
      },
      {
        text: 'Account',
        to: '/account',
      },
    ],
  },
];
</script>

<template>
  <VNavbar :menus="menus" />
</template>

Props ​

NameTypeDefault
modelValueBooleanfalse
smallBooleanfalse
userObjectnull
menusArray as PropType<VNavbarMenuItem[]>[]
loginPathString''
denseBooleanfalse
imgClassString'h-7'

Methods ​

None

Events ​

None

Slots ​

None

CSS Variables ​

None

Standalone Installation ​

You can also install the Navbar component individually via @morpheme/navbar package:

bash
yarn install @morpheme/navbar
yarn install @morpheme/navbar
vue
<script setup lang="ts">
import VNavbar from '@morpheme/navbar';
</script>

<template>
  <VNavbar />
</template>
<script setup lang="ts">
import VNavbar from '@morpheme/navbar';
</script>

<template>
  <VNavbar />
</template>

Storybook ​

View Storybook documentation here.