PageNav

The top bar of a page, with the sidebar toggle, breadcrumb and page actions.

1<template>2  <PageNav :breadcrumb="[{ label: 'Automations', to: '/automations' }, { label: 'Nightly dependency bump' }]" />3</template>

Props

Name	Type	Default
breadcrumb	BreadcrumbItem[]	-
toggle	boolean	true

Name	Description
actions	Right-aligned content (page actions, search/help controls). Renders nothing when unset.

Render this as the top of every page - it's the one nav bar every page in the product shares, not a per-page bespoke header.
Pass a full path ([{ label: 'Automations', to: '/automations' }, { label: 'Nightly dependency bump' }]) for a page reached by drilling into a hierarchy - the real pattern behind this package's own Breadcrumb component.
Pass a single-item array ([{ label: 'Settings' }]) for a plain, single-level page with no real path to show - there's no separate "just a title" prop, a one-crumb breadcrumb is that case.

Put the page's controls in #actions - it renders nothing by default. In apps/frontend, use AppPageNav, which fills it with the app's search/help controls.
Pass :toggle="false" when the page isn't inside a UDashboardGroup - otherwise the sidebar toggle renders but does nothing when clicked.

Don't reach for this over PageHeader when the page has no path to show at all and no action row - PageHeader already covers a plain title + description + primary action.
Don't add placeholder search/help buttons with no behavior - the app's working ones come from AppPageNav.