Usage

The DashboardNavbar component is meant to be the top bar of each DashboardPanel. Its height is based on the --header-height variable like the DashboardModal, DashboardSlideover and DashboardSearch components.

Use the title and badge props to customize the left side or use the #left and #right slots.

title

badge

Inbox

<template>
  <UDashboardNavbar title="Inbox" badge="5" />
</template>

The DashboardPanel component transforms itself into a slideover on mobile with the collapsible prop. The DashboardNavbar inside will automatically display a toggle button next to the title on small screens.

You can use the #toggle slot to customize this button as described in DashboardNavbarToggle.

The DashboardNavbar is generally placed inside a DashboardPanel.

pages/users.vue

<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Users" badge="5">
        <template #right>
          <UButton label="New user" trailing-icon="i-heroicons-plus" color="gray" />
        </template>
      </UDashboardNavbar>
    </UDashboardPanel>
  </UDashboardPage>
</template>

Slots

toggle

{}

left

{}

title

{}

badge

{}

center

{}

right

{}

Props

title

string

undefined

{}

{}

badge

any

undefined

Config

{
  wrapper: 'h-[--header-height] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 gap-x-4 min-w-0',
  container: 'flex items-center justify-between flex-1 gap-x-1.5 min-w-0',
  left: 'flex items-stretch gap-1.5 min-w-0',
  title: 'flex items-center gap-1.5 font-semibold text-gray-900 dark:text-white min-w-0',
  badge: {
    wrapper: 'inline-flex items-center',
    base: '',
    size: 'xs',
    color: 'primary',
    variant: 'subtle'
  },
  center: 'hidden lg:flex',
  right: 'flex items-stretch flex-shrink-0 gap-1.5'
}

DashboardNavbarToggle

A Button to toggle a DashboardPanel on mobile.

DashboardPage

A wrapper for your dashboard pages.