Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
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>

​
With Sidebar Toggle

The navbar includes a toggle button to open/close the sidebar. 
<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

​
as
any
default:"'div'"
The element or component this component should render as.
​
icon
string
The icon displayed next to the title.
​
title
string
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.
​
class
any
Custom class to apply to the root element.
​
ui
Partial<typeof theme>
Override default theme classes.

​
Slots

​
title
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us