Skip to content

Sidebar

Base dashboard sidebar menu

Usage

Basic Sidebar

vue
<template>
  <p-sidebar>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>Documents</p-nav-item>
      <p-nav-item>Contacts</p-nav-item>
      <p-nav-item>Structure</p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Fixed Sidebar

Fixed sidebar are using z-fixed for z-index value. It posible to change z-index value using --p-sidebar-z-index CSS variable. But don't forget to see the all z-index variant for layer-ordering component.

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>Documents</p-nav-item>
      <p-nav-item>Contacts</p-nav-item>
      <p-nav-item>Structure</p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Alignment

To align Sidebar, use align prop. Available value are left and right

vue
<template>
  <p-sidebar fixed align="right">
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>Documents</p-nav-item>
      <p-nav-item>Contacts</p-nav-item>
      <p-nav-item>Structure</p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Condensed

When you need less space/padding of sidebar navigation, you can set by using condensed prop.

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav condensed>
      <p-nav-item active>Documents</p-nav-item>
      <p-nav-item>Contacts</p-nav-item>
      <p-nav-item>Structure</p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Types

Sidebar has 2 types, wide and narrow. Default is wide. In variant narrow, you can place your navigation with icon-only or icon-label.

Icon Only

preview
vue
<template>
  <p-sidebar fixed variant="narrow">
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy-icon.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>
        <template #icon>
          <IconDocument />
        </template>
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconDocument />
        </template>
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconDataStructured />
        </template>
      </p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Icon with Label

vue
<template>
  <p-sidebar fixed type="narrow">
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy-icon.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>
        <template #icon>
          <IconDocument />
        </template>
        Docs
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconGroup />
        </template>
        Users
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconDataStructured />
        </template>
        Struct
      </p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Bottom Menus

If you need to place menus in the bottom, you just add bottom prop in your <p-sidebar-nav>

preview
vue
<template>
  <p-sidebar fixed type="narrow">
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy-icon.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav bottom>
      <p-nav-item active>
        <template #icon>
          <IconSettings />
        </template>
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <img src="/assets/images/icon-flag.svg"/>
        </template>
        ENG
      </p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Submenu just works in wide type. If you need collapsible menus, you just add collapsible prop in your <p-nav-sub-item>

Default Submenu

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>
        <template #icon>
          <IconDashboard />
        </template>
        Dashboard
      </p-nav-item>
      <p-nav-sub-item text="Documents">
        <template #icon>
          <IconDocument />
        </template>
        <p-sidebar-nav>
          <p-nav-item>
            Need Action
          </p-nav-item>
          <p-nav-item>
            In Progress
          </p-nav-item>
          <p-nav-item>
            Others
          </p-nav-item>
        </p-sidebar-nav>
      </p-nav-sub-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Collapsible Menus

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>
        <template #icon>
          <IconDashboard />
        </template>
        Dashboard
      </p-nav-item>
      <p-nav-sub-item text="Documents" collapsible>
        <template #icon>
          <IconDocument />
        </template>
        <p-sidebar-nav>
          <p-nav-item>
            Need Action
          </p-nav-item>
          <p-nav-item>
            In Progress
          </p-nav-item>
          <p-nav-item>
            Others
          </p-nav-item>
        </p-sidebar-nav>
      </p-nav-sub-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Grouped Menu

Grouped menu in the sidebar can be implemented by adding section-title via title props in your <p-sidebar-nav>. Action-permalink can also be added to the section-title via title-action-label & title-action-url.

Action

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav
      title="main"
      title-action-label="See More"
      title-action-url="#/categories">
      <p-nav-item active>
        <template #icon>
          <IconDashboard />
        </template>
        Dashboard
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconDocument />
        </template>
        Documents
      </p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Collapsible

If you want collapsible grouped menus, you just need to add collapsible props in your <p-sidebar-nav>.

vue
<template>
  <p-sidebar fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav
      title="main"
      collapsible>
      <p-nav-item active>
        <template #icon>
          <IconDashboard />
        </template>
        Dashboard
      </p-nav-item>
      <p-nav-sub-item text="Documents" collapsible>
        <template #icon>
          <IconDocument />
        </template>
        <p-sidebar-nav>
          <p-nav-item>
            Need Action
          </p-nav-item>
          <p-nav-item>
            In Progress
          </p-nav-item>
          <p-nav-item>
            Others
          </p-nav-item>
        </p-sidebar-nav>
      </p-nav-sub-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Toggleable

Toggleable-feature can be used for responsive purpose. It can be toggle the sidebar via toggleable props. It also can toggle-hide or toggle-show automatically if certain breakpoint condition have been met. There are at least 4 breakpoints available: all, lg, md and sm.

preview
vue
<template>
  <p-sidebar v-model="model" toggleable="lg" fixed>
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav title="Main">
      <p-nav-item active>Documents</p-nav-item>
      <p-nav-item>Contacts</p-nav-item>
      <p-nav-item>Structure</p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

It's possible to make sidebar toggle-hide by default to make fullwidth page with no-sidebar. Just give all value in toggleable props.

preview
vue
<template>
  <p-sidebar v-model="model" toggleable="all" fixed type="narrow">
    <template #brand>
      <p-sidebar-brand>
        <img src="/assets/images/logo-privy-icon.svg" alt="" />
      </p-sidebar-brand>
    </template>
    <p-sidebar-nav>
      <p-nav-item active>
        <template #icon>
          <IconDocument />
        </template>
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconGroup />
        </template>
      </p-nav-item>
      <p-nav-item>
        <template #icon>
          <IconDataStructured />
        </template>
      </p-nav-item>
    </p-sidebar-nav>
  </p-sidebar>
</template>

Variables

Sidebar use local CSS variables for enhanced real-time customization.

sass
--p-sidebar-size-narrow: 60px;
--p-sidebar-size-wide: 230px;
--p-sidebar-bg: theme(backgroundColor.DEFAULT);
--p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
--p-sidebar-z-index: theme(zIndex.fixed);
--p-sidebar-sticky-top: theme(spacing.0);
--p-sidebar-padding-x: theme(spacing.2);
--p-sidebar-padding-y: theme(spacing.4);
sass
--p-sidebar-brand-sticky-top: 0;

API

Props <p-sidebar>

PropsTypeDefaultDescription
variantStringpillsSidebar variant, valid value is pills, lines and tabs
alignStringleftSidebar alignment, valid value is left and right
typeStringwideSidebar type, valid value is wide and narrow
fixedBooleanfalseActivate fixed Sidebar
stickyBooleanfalseActivate sticky Sidebar
toggleableString-Toggle with desired breakpoint lg, md, sm and all

Slots <p-sidebar>

NameDescription
defaultContent to place in the Sidebar
brandContent to place in the Sidebar Brand
bottomContent to place in the Sidebar bottom

Props <p-sidebar-brand>

PropsTypeDefaultDescription
hrefStringundefinedTarget URL of the Sidebar Brand link
fixedBooleanfalseMake position of sidebar brand fixed on top
stickyBooleanfalseMake position of sidebar brand sticky on top

Slots <p-sidebar-brand>

NameDescription
defaultContent to place in the Sidebar Brand

Props <p-sidebar-nav>

PropsTypeDefaultDescription
titleStringundefinedTitle to place in the top of sidebar navigation block
title-action-labelStringundefinedTitle action label to place in the section title
title-action-urlStringundefinedTitle action url to place in the section title
bottomBooleanfalsePlace group of sidebar navigation in the bottom of Sidebar
condensedBooleanfalseActivate condensed of group navigation with less space
collapsibleBooleanfalseActivate collapsible navigation from section title

Slots <p-sidebar-nav>

NameDescription
defaultContent to place in the Sidebar Nav

Events

NameArgumentsDescription
There no event here

Released under the MIT License.