DashboardToolbar
A sub-navbar to add actions to your DashboardPanel.
Usage
The DashboardToolbar component acts as a sub-navbar with a pre-defined height matching exactly the #header slot of a DashboardSidebar or even a Table row.
You can either use the #default or the #left and #right slots to add actions to the toolbar.
Put anything you like inside, for example an HorizontalNavigation component.
<script setup lang="ts">
const links = [[{
label: 'General',
icon: 'i-heroicons-user-circle'
}, {
label: 'Members',
icon: 'i-heroicons-user-group'
}, {
label: 'Notifications',
icon: 'i-heroicons-bell'
}], [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: 'https://ui.nuxt.com/pro',
target: '_blank'
}, {
label: 'Buy now',
icon: 'i-heroicons-credit-card',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank'
}]]
</script>
<template>
<UDashboardToolbar class="py-0 px-1.5 overflow-x-auto">
<UHorizontalNavigation :links="links" />
</UDashboardToolbar>
</template>
The DashboardToolbar is generally placed inside a DashboardPanel under the DashboardNavbar.
pages/users.vue
<template>
<UDashboardPage>
<UDashboardPanel>
<UDashboardNavbar title="Users" />
<UDashboardToolbar>
<template #left>
<USelectMenu icon="i-heroicons-check" placeholder="Status" multiple />
<USelectMenu icon="i-heroicons-map-pin" placeholder="Location" multiple />
</template>
<template #right>
<USelectMenu label="Display" icon="i-heroicons-computer-desktop" multiple />
</template>
</UDashboardToolbar>
</UDashboardPanel>
</UDashboardPage>
</template>
Slots
default
{}
left
{}
right
{}
Props
ui
{}
{}Config
{
wrapper: 'min-h-[49px] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 py-2 gap-x-4',
container: 'flex items-center justify-between flex-1 gap-x-1.5',
left: 'flex items-stretch gap-1.5',
right: 'flex items-stretch gap-1.5'
}