Note

This documentation describes the Sidebar Vue component for native UI views, for Xml templates see panel-menu.

Sidebar

A collapsible navigation sidebar with support for nested menus, logo, and header/footer slots.

Import

import { Sidebar } from '@neos/app'

Props

Prop	Type	Default	Description
title	string	undefined	Application title displayed at the top of the sidebar
logo	string	undefined	URL of the logo image
name	string	undefined	Named menu key to load items from the ViewModel context
items	MenuItem[]	undefined	Explicit menu items array
expandedByDefault	boolean	false	Expand all sub-menus on mount
toggleButtonVisible	boolean	true	Show the collapse/expand toggle button
collapseMode	'collapse' \| 'hidden'	'collapse'	collapse = collapse to icon rail; hidden = fully hide
collapseOtherMenusOnMenuExpand	boolean	false	Close other expanded sub-menus when one is opened
collapseOnItemClick	boolean	false	Collapse the sidebar when a menu item is clicked

Model (v-model)

Name	Type	Description
expanded	boolean	Controls the expanded/collapsed state

Slots

Slot	Description
header	Content rendered above the menu list (below the logo/title)
footer	Content rendered below the menu list

Usage Examples

Application shell sidebar

<HorizontalLayout space="none" style="height: 100vh">
  <Sidebar
    title="My App"
    logo="/assets/logo.svg"
    :items="mainNavItems"
    :expanded-by-default="false"
    :collapse-on-item-click="true"
    v-model:expanded="sidebarOpen"
  >
    <template #footer>
      <UserButton />
    </template>
  </Sidebar>
  <VerticalLayout space="none" style="flex: 1; overflow: auto">
    <ViewContainer />
  </VerticalLayout>
</HorizontalLayout>

Sidebar with custom header actions

<Sidebar :items="navItems" v-model:expanded="open">
  <template #header>
    <GlobalSearchButton :label="false" />
  </template>
</Sidebar>

Icon-only collapsed sidebar

<Sidebar :items="navItems" collapse-mode="collapse" :toggle-button-visible="true" />