DashboardNavbar

A navbar to display inside a DashboardPanel.

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.

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

Toggle

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.

<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)
• ui - DeepPartial<{ wrapper: string; container: string; left: string; title: string; badge: { wrapper: string; base: string; size: “xs”; color: “primary”; variant: “subtle”; }; center: string; right: string; }> ({})
• 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'
}