DashboardNavbar
A top bar for a DashboardPanel's own main content area.
Usage
<SDashboardNavbar title="Overview">
<template #leading>
<SDashboardSidebarToggle />
</template>
<SButton size="sm" icon="hugeicons:plus-sign">New</SButton>
</SDashboardNavbar>
Distinct from the site-wide Header - this one lives inside a DashboardPanel, scoped to the main content area only.
Nothing renders in the leading slot by default - matching every other piece
of this family (a DashboardResizeHandle
isn't auto-inserted between the sidebar and panel either), a sidebar-toggle
button is something you compose in explicitly rather than something
SDashboardNavbar assumes you want. See
DashboardSidebarToggle for
what it does and how to customize it - it collapses/expands
DashboardSidebar (or opens/closes it
on mobile, see DashboardGroup's own
"Mobile" section), and renders nothing itself until there's an actual
sidebar in the same DashboardGroup to
control.
Custom :ui
To see exactly what you'd be overriding - the current default classes for
every slot - here's DashboardNavbar's own theme file:
Props
| Prop | Type | Default |
|---|---|---|
title | string | - |
ui | Partial<Record<DashboardNavbarSlot, string | object>> | - |
Slots
| Slot | Description |
|---|---|
leading | Empty by default - a sidebar-toggle button, typically |
title | Custom title content, overrides title prop |
| default | Trailing content - actions, a search trigger, whatever the page needs |