DashboardNavbarPRO

GitHub
A responsive navbar to display in a dashboard.

Usage

The DashboardNavbar component is a responsive navigation bar that integrates with the DashboardSidebar component. It includes a mobile toggle button to enable responsive navigation in dashboard layouts.

Use it inside the header slot of the DashboardPanel component:

pages/index.vue
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar />
    </template>
  </UDashboardPanel>
</template>

Use the left, default and right slots to customize the navbar.

Inbox

4
<script setup lang="ts">
const items = [
  {
    label: 'All',
    value: 'all'
  },
  {
    label: 'Unread',
    value: 'unread'
  }
]
</script>

<template>
  <UDashboardNavbar title="Inbox">
    <template #leading>
      <UDashboardSidebarCollapse />
    </template>

    <template #trailing>
      <UBadge label="4" variant="subtle" />
    </template>

    <template #right>
      <UTabs :items="items" default-value="all" size="sm" class="w-40" :content="false" />
    </template>
  </UDashboardNavbar>
</template>
In this example, we use the Tabs component in the right slot to display some tabs.

Title

Use the title prop to set the title of the navbar.

Dashboard

<template>
  <UDashboardNavbar title="Dashboard" />
</template>

Icon

Use the icon prop to set the icon of the navbar.

Dashboard

<template>
  <UDashboardNavbar title="Dashboard" icon="i-lucide-house" />
</template>

Toggle

Use the toggle prop to customize the toggle button displayed on mobile that opens the DashboardSidebar component.

You can pass any property from the Button component to customize it.

<template>
  <UDashboardNavbar
    title="Dashboard"
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  />
</template>

Toggle Side

Use the toggle-side prop to change the side of the toggle button. Defaults to right.

<template>
  <UDashboardNavbar
    title="Dashboard"
    toggle-side="right"
  />
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

icon

string

The icon displayed next to the title.

title

string

toggle

true

boolean | Partial<ButtonProps>

Customize the toggle button to open the sidebar. { color: 'neutral', variant: 'ghost' }

toggleSide

'left'

"left" | "right"

The side to render the toggle button on.

ui

Partial<{ root: string; left: string; icon: string; title: string; center: string; right: string; toggle: string; }>

Slots

Slot Type
title

{}

leading

DashboardNavbarSlotsProps

trailing

DashboardNavbarSlotsProps

left

DashboardNavbarSlotsProps

default

DashboardNavbarSlotsProps

right

DashboardNavbarSlotsProps

toggle

DashboardNavbarSlotsProps

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardNavbar: {
      slots: {
        root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-border) px-4 sm:px-6 gap-1.5',
        left: 'flex items-center gap-1.5 min-w-0',
        icon: 'shrink-0 size-5 self-center me-1.5',
        title: 'flex items-center gap-1.5 font-semibold text-(--ui-text-highlighted) truncate',
        center: 'hidden lg:flex',
        right: 'flex items-center shrink-0 gap-1.5',
        toggle: ''
      },
      variants: {
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: ''
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        dashboardNavbar: {
          slots: {
            root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-border) px-4 sm:px-6 gap-1.5',
            left: 'flex items-center gap-1.5 min-w-0',
            icon: 'shrink-0 size-5 self-center me-1.5',
            title: 'flex items-center gap-1.5 font-semibold text-(--ui-text-highlighted) truncate',
            center: 'hidden lg:flex',
            right: 'flex items-center shrink-0 gap-1.5',
            toggle: ''
          },
          variants: {
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: ''
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardNavbar: {
          slots: {
            root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-(--ui-border) px-4 sm:px-6 gap-1.5',
            left: 'flex items-center gap-1.5 min-w-0',
            icon: 'shrink-0 size-5 self-center me-1.5',
            title: 'flex items-center gap-1.5 font-semibold text-(--ui-text-highlighted) truncate',
            center: 'hidden lg:flex',
            right: 'flex items-center shrink-0 gap-1.5',
            toggle: ''
          },
          variants: {
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: ''
              }
            }
          }
        }
      }
    })
  ]
})

DashboardGroup

A fixed layout component that provides context for dashboard components with sidebar state management and persistence.

DashboardPanel

A resizable panel to display in a dashboard.