Navbar

Use bo-navbar as a vertical shell for product identity, navigation links, and account actions. Its menu toggle models the responsive open state.

Usage

BM

Bamboo

Workspace overview

The navbar stays in the side rail while page content occupies the remaining space.

<bo-navbar class="h-full shrink-0" v-model:open="open" aria-label="Workspace">
  <template #header><bo-avatar label="BM" size="sm" /></template>
  <template #content>
    <button type="button" class="bo-navbar__link" :class="{ 'bo-navbar__link--active': selectedNav === 'home' }" @click="selectedNav = 'home'">Home</button>
    <button type="button" class="bo-navbar__link" :class="{ 'bo-navbar__link--active': selectedNav === 'projects' }" @click="selectedNav = 'projects'">Projects</button>
  </template>
  <template #footer><bo-button kind="outline" size="sm">Sign in</bo-button></template>
</bo-navbar>

Regions

Use top, middle, and bottom for content around the primary content region.

WorkspaceTeam switcher

Version 1.0

Primary content

Use the named regions to keep the side navigation structured.

<bo-navbar class="h-full shrink-0">
  <template #header>Workspace</template>
  <template #top>Team switcher</template>
  <template #content>Primary links</template>
  <template #bottom>Version 1.0</template>
</bo-navbar>

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Navigation attributes.
open	boolean	false	Responsive menu state used by v-model:open.
update:open	event	-	Emitted when the menu toggle changes state.
ariaLabel	string	Main navigation	Navigation landmark label.
header / brand	slot	-	Product name or logo.
content / links	slot	-	Primary links.
top / middle / bottom	slot	-	Content around the primary link region.
footer / actions	slot	-	Account or secondary actions.