Morpheme

Appearance

Navigation Drawer ​

NavDrawer / Navigation Drawer / Sidebar.

WARNING

This component is deprecated and will be replaced by Navigation Drawer component in the next major version.

Usage ​

Basic Usage ​

vue
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

<template>
  <VNavDrawer :menus="menus" />
</template>
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

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

INFO

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

Expand on hover ​

vue
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

<template>
  <VNavDrawer :menus="menus" expand-on-hover />
</template>
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

<template>
  <VNavDrawer :menus="menus" expand-on-hover />
</template>

Custom Class ​

vue
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

<template>
  <VNavDrawer :menus="menus" class="bg-blue-800" />
</template>
<script setup lang="ts">
const menus = [
  {
    text: 'Dasbor',
    to: '/',
    icon: 'ri:database-2-line',
  },
  {
    text: 'Administrator',
    icon: 'ri:database-2-line',
    children: [
      {
        text: 'Manajemen Pengguna',
        to: '/cms/manajemen-pengguna',
      },
      {
        text: 'Manajemen Peran',
        to: '/cms/manajemen-peran',
      },
    ],
  },
];
</script>

<template>
  <VNavDrawer :menus="menus" class="bg-blue-800" />
</template>

Props ​

NameTypeDefault
modelValueBooleanfalse
smallBooleanfalse
menusArray as PropType<Menu[]>[]
miniBooleanfalse
logoPropsObject{}
darkBooleanfalse
colorString''
hideToggleBooleanfalse
btnToggleClassString''
classMenuParentString''
toggleColorString'primary'
expandColorString''
expandHoverBooleanfalse
isExpandHoverBooleanfalse
drawerClassString

Methods ​

None

Events ​

None

Slots ​

None

CSS Variables ​

None

Standalone Installation ​

You can also install the NavDrawer component individually via @morpheme/nav-drawer package:

bash
yarn install @morpheme/nav-drawer
yarn install @morpheme/nav-drawer
vue
<script setup lang="ts">
import VNavDrawer from '@morpheme/nav-drawer';
</script>

<template>
  <VNavDrawer />
</template>
<script setup lang="ts">
import VNavDrawer from '@morpheme/nav-drawer';
</script>

<template>
  <VNavDrawer />
</template>

Storybook ​

View Storybook documentation here.