Usage
The DashboardNavbar component provides a responsive navigation bar for dashboard layouts, with support for sidebar toggling.
<template>
<UDashboardNavbar
title="Dashboard"
icon="i-heroicons-home"
/>
</template>
<UDashboardNavbar
title="My Dashboard"
toggle
toggle-side="left"
/>
Layout Slots
The navbar has three main content areas: left, center (default), and right.
<UDashboardNavbar title="Dashboard">
<template #left>
<UButton label="Menu" />
</template>
<template #default>
<nav>
<UButton label="Home" variant="link" />
<UButton label="Settings" variant="link" />
</nav>
</template>
<template #right>
<UButton icon="i-heroicons-bell" variant="ghost" />
<UButton icon="i-heroicons-user" variant="ghost" />
</template>
</UDashboardNavbar>
Custom Toggle
Customize the toggle button appearance.
<UDashboardNavbar
title="Dashboard"
:toggle="{ color: 'primary', variant: 'solid' }"
toggle-side="right"
/>
Without Toggle
Disable the toggle button if you don’t need sidebar functionality.
<UDashboardNavbar
title="Dashboard"
:toggle="false"
/>
Slots Example
<UDashboardNavbar>
<template #leading>
<UIcon name="i-heroicons-squares-2x2" class="size-5" />
</template>
<template #title>
<h1 class="text-xl font-bold">Custom Title</h1>
</template>
<template #trailing>
<UBadge label="New" color="primary" />
</template>
</UDashboardNavbar>
Props
The element or component this component should render as.
The icon displayed next to the title.
The title text displayed in the navbar.
toggle
boolean | ButtonProps
default:"true"
Customize the toggle button to open the sidebar. Pass false to disable, or an object to customize the button.
toggleSide
'left' | 'right'
default:"'left'"
The side to render the toggle button on.
Custom class to apply to the root element.
Override default theme classes.
Slots
Customize the title content.
leading
{ ui, sidebarOpen, sidebarCollapsed }
Customize the leading content (before the title).
trailing
{ ui, sidebarOpen, sidebarCollapsed }
Customize the trailing content (after the title).
left
{ sidebarOpen, sidebarCollapsed }
Customize the entire left section of the navbar.
default
{ sidebarOpen, sidebarCollapsed }
Customize the center section of the navbar.
right
{ sidebarOpen, sidebarCollapsed }
Customize the right section of the navbar.
toggle
{ ui, sidebarOpen, sidebarCollapsed }
Customize the toggle button.