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">
const links = [
[
{
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://ui3.nuxt.dev/getting-started/installation/pro/nuxt',
target: '_blank'
},
{
label: 'Buy now',
icon: 'i-lucide-shopping-cart',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank'
}
]
]
</script>
<template>
<UDashboardToolbar>
<UNavigationMenu :items="links" 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({
uiPro: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-(--ui-border) 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({
uiPro: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-(--ui-border) 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'
}
}
}
})
]
})