1# Navigation
2 
3Patterns for headers, sidebars, breadcrumbs, and tab navigation.
4 
5## Header with mobile menu
6 
7`UHeader` default slot is desktop nav, `#body` is the mobile menu. Without `#body`, mobile users have no navigation.
8 
9```vue
10<UHeader>
11  <template #title>
12    <Logo class="h-6 w-auto" />
13  </template>
14 
15  <UNavigationMenu :items="items" />
16 
17  <template #right>
18    <UColorModeButton />
19    <UButton label="Sign in" color="neutral" variant="ghost" />
20  </template>
21 
22  <template #body>
23    <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
24  </template>
25</UHeader>
26```
27 
28> Full app shell example in [landing layout](../layouts/landing.md).
29 
30## Sidebar navigation (dashboard)
31 
32See [dashboard layout](../layouts/dashboard.md) for the full sidebar pattern with `UDashboardSidebar` + `UNavigationMenu`. Key points:
33- Pass `:collapsed="collapsed"` to `UNavigationMenu` inside collapsible sidebars
34- Use `NavigationMenuItem[][]` (nested arrays) for separate nav groups
35- Use `#footer` slot for user menu with `UDropdownMenu`
36 
37## Breadcrumbs
38 
39```vue
40<script setup lang="ts">
41const route = useRoute()
42 
43const breadcrumbs = computed(() => {
44  const segments = route.path.split('/').filter(Boolean)
45  return segments.map((segment, index) => ({
46    label: segment.charAt(0).toUpperCase() + segment.slice(1),
47    to: '/' + segments.slice(0, index + 1).join('/')
48  }))
49})
50</script>
51 
52<template>
53  <UBreadcrumb :items="breadcrumbs" />
54</template>
55```
56 
57## Tab navigation (within a page)
58 
59```vue
60<script setup lang="ts">
61const items = [{
62  label: 'Overview',
63  icon: 'i-lucide-layout-dashboard',
64  slot: 'overview' as const
65}, {
66  label: 'Activity',
67  icon: 'i-lucide-activity',
68  slot: 'activity' as const
69}, {
70  label: 'Members',
71  icon: 'i-lucide-users',
72  slot: 'members' as const
73}]
74</script>
75 
76<template>
77  <UTabs :items="items">
78    <template #overview>
79      <!-- Overview content -->
80    </template>
81    <template #activity>
82      <!-- Activity feed -->
83    </template>
84    <template #members>
85      <!-- Members list -->
86    </template>
87  </UTabs>
88</template>
89```
90 
91