Skip to content

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

NameTypeDefault
colorstring | default | primary | secondary | darkdefault
modelValuebooleantrue
shadow'sm' | 'md' | 'lg' | 'xl' | booleanfalse
borderedbooleanfalse
stickybooleanfalse
fixedbooleanfalse
rightbooleanfalse
leftbooleanfalse
transitionstringnav-drawer-transition
overlaybooleanfalse
overlayTransitionstringnav-drawer-overlay-transition
closeOnOverlayClickbooleantrue
minibooleanfalse
expandOnHoverbooleanfalse
expandedbooleanfalse
heightscreen | fit | auto | max | screen-dvh | screen-svh |screen-lvh | unset | initial | inherit | min-content | revert | nonescreen
resizeablebooleanfalse
maxWidthboolean248
minWidth62false
miniOnResizerClickbooleanfalse
hideOnResizerClickbooleanfalse
expandOnResizerClickbooleanfalse

Events

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

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

vue
<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.

vue
<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.

vue
<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

scss
: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:

bash
npm i @morpheme/nav-drawer
npm i @morpheme/nav-drawer
vue
<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.