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.
Inbox
5
<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.
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
undefinedui
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
undefinedConfig
{
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'
}