Navigation Drawer ​

The NavDrawer component is flexible component to create side navigation panel.

Usage ​

Basic Usage ​

To use the NavDrawer component, just import it from @morpheme/ui or @morpheme/nav-drawer and use it in the template.

Colors ​

By default, NavDrawer component support 4 colors: default, primary, secondary and dark. You can use color prop to change the navigation drawer color.

Primary ​

Secondary ​

Dark ​

Shadow ​

• props: shadow
• type: string | boolean
• value: sm | md | lg | xl | true | false
• default: false

You can add shadow to the nav-drawer using shadow prop.

Bordered ​

• props: bordered
• type: boolean
• default: false

You can add border to the nav-drawer using bordered prop.

Fixed ​

• props: fixed
• type: boolean
• default: false

Use fixed prop to apply fixed position to the navigation drawer.

Sticky ​

• props: fixed
• type: boolean
• default: false

Use sticky prop to apply sticky position to the navigation drawer.

Toggle ​

• props: modelValue
• type: boolean
• default: false

You can toggle show or hide the navigation drawer using v-model or modelValue prop.

Mini ​

• props: mini
• type: boolean
• default: false

Use mini prop to apply mini style to the navigation drawer.

Expand on Hover ​

To enable expand on hover effect, you need to apply two props: expand-on-hover and expanded. The prop expand-on-hover tells the nav-drawer to use this effect and the expanded prop used as the expand state of the nav-drawer.

Overlay ​

• props: overlay
• type: boolean
• default: false

Use overlay prop to add overlay to the navigation drawer.

Right Aligned ​

• props: right
• type: boolean
• default: false

By default the navigation drawer is placed at the left of the page. You can move it to the right by passing right prop.

Custom Transition ​

• props: transition
• type: string
• default: nav-drawer-transition

You can also customize the default transition using transition prop.

Resizeable ​

• props: resizeable
• type: boolean
• default: false

You can make nav drawer resizeable by adding resizeable prop. You can also change nav drawer size to mini when resizer button clicked by adding miniOnResizerClick prop, hide nav drawer when resizer clicked via hideOnResizerClick prop or toggle expand the nav drawer via expandOnResizerClick prop.

Props ​

Events ​

• (e: 'update:modelValue', value: string): void;

Emitted when modelValue prop changed. Used for v-model directive.

<script setup lang="ts">
const onUpdate = (value: boolean) => console.log('Updated!', value);
</script>

<template>
  <NavDrawer @update:modelValue="onUpdate" />
</template>

<script setup lang="ts">
const onUpdate = (value: boolean) => console.log('Updated!', value);
</script>

<template>
  <NavDrawer @update:modelValue="onUpdate" />
</template>

• (e: 'update:expanded', value: boolean): void;

Emitted when expanded prop changed. Used for v-model:expanded directive.

<script setup lang="ts">
const onUpdate = (value: boolean) => console.log('Expanded!', value);
</script>

<template>
  <NavDrawer @update:expanded="onUpdate" />
</template>

<script setup lang="ts">
const onUpdate = (value: boolean) => console.log('Expanded!', value);
</script>

<template>
  <NavDrawer @update:expanded="onUpdate" />
</template>

• (e: 'clickOverlay'): void;

Emitted when user click the overlay element.

<script setup lang="ts">
const onOverlayClicked = () => console.log('Clicked!');
</script>

<template>
  <NavDrawer @clickOverlay="onOverlayClicked" />
</template>

<script setup lang="ts">
const onOverlayClicked = () => console.log('Clicked!');
</script>

<template>
  <NavDrawer @clickOverlay="onOverlayClicked" />
</template>

Slots ​

• default

The default slot is used to place any content inside navigation drawer.

CSS Variables ​

:root {
  --nav-drawer-width: 248px;
  --nav-drawer-height: 100%;
  --nav-drawer-transition: all 0.3s ease-out;
  --nav-drawer-bg-color: var(--color-white);
  --nav-drawer-text-color: var(--color-gray-800);
  --nav-drawer-shadow: none;
  --nav-drawer-border-color: var(--color-gray-200);
  --nav-drawer-z-index: 20;

  // mini
  --nav-drawer-mini-width: 62px;

  // expanded
  --nav-drawer-inexpanded-width: var(--nav-drawer-mini-width);
  --nav-drawer-expanded-width: 248px;

  // resizer
  --nav-drawer-resizer-width: 6px;
  --nav-drawer-resizer-bg-color: transparent;
  --nav-drawer-resizer-hover-bg-color: var(--color-gray-400);
}

:root {
  --nav-drawer-width: 248px;
  --nav-drawer-height: 100%;
  --nav-drawer-transition: all 0.3s ease-out;
  --nav-drawer-bg-color: var(--color-white);
  --nav-drawer-text-color: var(--color-gray-800);
  --nav-drawer-shadow: none;
  --nav-drawer-border-color: var(--color-gray-200);
  --nav-drawer-z-index: 20;

  // mini
  --nav-drawer-mini-width: 62px;

  // expanded
  --nav-drawer-inexpanded-width: var(--nav-drawer-mini-width);
  --nav-drawer-expanded-width: 248px;

  // resizer
  --nav-drawer-resizer-width: 6px;
  --nav-drawer-resizer-bg-color: transparent;
  --nav-drawer-resizer-hover-bg-color: var(--color-gray-400);
}

Customization ​

You can constumize the navigation drawer via CSS Properties.

Here is the example to create indigo colored navigation drawer.

In the example above, first, we need to specify the custom color via color prop. For example, set to indigo and this will set class nav-drawer-indigo respectively so you can define your own style by utilizing the CSS Properties like above.

Standalone Installation ​

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

npm i @morpheme/nav-drawer

npm i @morpheme/nav-drawer

<script setup lang="ts">
import {NavDrawer} from '@morpheme/nav-drawer';
</script>

<template>
  <NavDrawer>Hello World</NavDrawer>
</template>

<script setup lang="ts">
import {NavDrawer} from '@morpheme/nav-drawer';
</script>

<template>
  <NavDrawer>Hello World</NavDrawer>
</template>

Storybook ​

View Storybook documentation here.