DashboardToolbar
A toolbar to display under the navbar in a dashboard.
Usage
The DashboardToolbar component is used to display a toolbar under the DashboardNavbar component.
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 />
<UDashboardToolbar />
</template>
</UDashboardPanel>
</template>
Use the left, default and right slots to customize the toolbar.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[][] = [
[
{
label: 'General',
icon: 'i-lucide-user',
active: true
},
{
label: 'Members',
icon: 'i-lucide-users'
},
{
label: 'Notifications',
icon: 'i-lucide-bell'
}
],
[
{
label: 'Documentation',
icon: 'i-lucide-book-open',
to: 'https://ui.nuxt.com/docs',
target: '_blank'
},
{
label: 'Help & Feedback',
icon: 'i-lucide-help-circle',
to: 'https://github.com/nuxt/ui/issues',
target: '_blank'
}
]
]
</script>
<template>
<UDashboardToolbar>
<UNavigationMenu :items="items" highlight class="flex-1" />
</UDashboardToolbar>
</template>
In this example, we use the NavigationMenu component to render some links.
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
left |
|
right |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
left: 'flex items-center gap-1.5',
right: 'flex items-center gap-1.5'
}
}
}
})
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({
ui: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
left: 'flex items-center gap-1.5',
right: 'flex items-center gap-1.5'
}
}
}
})
]
})
Changelog
5cb65 — feat: import @nuxt/ui-pro components