TopNav

Horizontal app header with brand, navigation items and an actions area. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiTopNav } from '@ziyarago/ui/vue'

Default

ZiyaraGo

Vue

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
>
  <template #actions>Sign in</template>
</UiTopNav>

Text only

ZiyaraGo

Vue

<UiTopNav
  brand="ZiyaraGo"
  value="home"
  :items="[{ value: 'home', label: 'Home' }, { value: 'tours', label: 'Tours' }, { value: 'about', label: 'About' }]"
 />

Sizes

ZiyaraGo

Vue

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
  size="xs"
>
  <template #actions>Sign in</template>
</UiTopNav>

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
  size="sm"
>
  <template #actions>Sign in</template>
</UiTopNav>

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
  size="md"
>
  <template #actions>Sign in</template>
</UiTopNav>

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
  size="lg"
>
  <template #actions>Sign in</template>
</UiTopNav>

<UiTopNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
  size="xl"
>
  <template #actions>Sign in</template>
</UiTopNav>

API reference

Horizontal app header with a brand area, navigation items and an actions area.

Props

PropType and valuesDefaultDescription

brandstring | VNode—Logo or product name on the left.

items{ value: string; label: string; icon?: string; count?: string | number }[]'[]'Navigation entries. count renders a small counter after the label.

valuestring—Value of the active item (aria-current="page").

sizexssmmdlgxl'md'Scale of header padding, item height and text.

Slots

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

actionsRight side of the header (buttons, avatar). React also accepts an actions prop.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked item.

Notes

Controlled: update value yourself in the change handler.
Items use count; SubNav uses badge for the same purpose.