Nuxt UI v3-alpha has been released!

Try it out

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-ticket',
  to: 'https://ui.nuxt.com/pro/pricing',
  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
DeepPartial<{ wrapper: string; container: string; left: string; right: string; }>
{}

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'
}