AppShell

Application frame with a top or side navigation and a main area; use frame to keep it inside its container.

Jump to API reference

Import

Vue
import { UiAppShell } from '@ziyarago/ui/vue'

Top navigation

ZiyaraGo
Main content area
Vue
<UiAppShell
  frame
  brand="ZiyaraGo"
  nav="top"
  value="bookings"
  :items="[{ value: 'home', label: 'Home' }, { value: 'bookings', label: 'Bookings' }, { value: 'guests', label: 'Guests' }]"
>
  Main content area
</UiAppShell>

Side navigation

Main content area
Vue
<UiAppShell
  frame
  brand="ZiyaraGo"
  nav="side"
  value="bookings"
  :items="[{ group: 'Manage' }, { value: 'home', label: 'Home' }, { value: 'bookings', label: 'Bookings', icon: 'calendar', count: 4 }, { value: 'guests', label: 'Guests', icon: 'users' }]"
>
  Main content area
</UiAppShell>

API reference

Application frame with a top or side navigation and a main content area.

Props

PropType and valuesDefaultDescription
navtopside'top'Navigation placement: TopNav or SideNav.
brandVNode | string—Brand/logo content shown in the navigation.
items{ value: string; label: string; icon?: string }[]—Navigation items, passed to TopNav or SideNav.
valuestring—Value of the active navigation item. Changed via the change event.
actionsVNode—Right side of the top navigation (nav="top" only).
collapsedboolean—Controlled collapsed state of the side navigation. Uncontrolled (internal state, initially false) when omitted.
collapsiblebooleantrueShows the collapse toggle in the side navigation. Set false to hide it.
collapseLabelstring—Label of the collapse toggle in the side navigation.
framebooleanfalseRenders the shell as a framed block instead of full viewport (useful in previews).

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultMain page content.
footerBottom area of the side navigation (nav="side" only).

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked navigation item.
collapseCalled with the new collapsed boolean when the toggle is pressed.

Notes

  • The footer slot and collapse props apply only to nav="side".