A navbar to display inside a DashboardPanel.
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>
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>
toggle
- {}left
- {}title
- {}badge
- {}center
- {}right
- {}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){
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'
}