0
# Navigation Components
1

2
Navigation bar and dropdown menu components providing site-wide navigation with responsive design, active state handling, and dropdown menu support.
3

4
## Capabilities
5

6
### Navbar Component
7

8
Main navigation bar component that contains site title, navigation links, and responsive mobile menu toggle.
9

10
```javascript { .api }
11
/**
12
 * Main navigation bar Vue component
13
 * Available as @theme/components/Navbar.vue
14
 */
15
const Navbar: VueComponent = {
16
  name: 'Navbar',
17
  props: {},
18
  emits: ['toggle-sidebar']
19
};
20
```
21

22
**Usage:**
23

24
```vue
25
<template>
26
  <Navbar @toggle-sidebar="handleSidebarToggle" />
27
</template>
28
```
29

30
### NavLinks Component
31

32
Container component for navigation links that handles responsive layout and link grouping.
33

34
```javascript { .api }
35
/**
36
 * Navigation links container Vue component  
37
 * Available as @theme/components/NavLinks.vue
38
 */
39
const NavLinks: VueComponent = {
40
  name: 'NavLinks',
41
  props: {},
42
  computed: {
43
    userLinks: Array,
44
    nav: Array,
45
    userLinksTitle: String
46
  }
47
};
48
```
49

50
### NavLink Component
51

52
Individual navigation link component with support for internal and external links.
53

54
```javascript { .api }
55
/**
56
 * Individual navigation link Vue component
57
 * Available as @theme/components/NavLink.vue
58
 */
59
const NavLink: VueComponent = {
60
  name: 'NavLink', 
61
  props: {
62
    item: {
63
      type: Object,
64
      required: true
65
    }
66
  },
67
  computed: {
68
    link: String,
69
    exact: Boolean,
70
    isNonHttpURI: Boolean,
71
    isBlankTarget: Boolean,
72
    isInternal: Boolean
73
  }
74
};
75
```
76

77
**Props:**
78

79
- `item` (Object, required): Navigation item configuration
80

81
**Item Structure:**
82

83
```javascript { .api }
84
interface NavItem {
85
  /** Display text for the navigation item */
86
  text: string;
87
  /** Link URL (internal or external) */
88
  link?: string;
89
  /** Nested navigation items for dropdown */
90
  items?: NavItem[];
91
  /** Link target attribute */
92
  target?: string;
93
  /** Link rel attribute */
94
  rel?: string;
95
  /** Aria label for accessibility */
96
  ariaLabel?: string;
97
}
98
```
99

100
**Usage Examples:**
101

102
```javascript
103
// Simple navigation link
104
{
105
  text: 'Home',
106
  link: '/'
107
}
108

109
// External link  
110
{
111
  text: 'GitHub',
112
  link: 'https://github.com/vuejs/vuepress',
113
  target: '_blank'
114
}
115

116
// Dropdown with nested items
117
{
118
  text: 'Documentation',
119
  items: [
120
    { text: 'Guide', link: '/guide/' },
121
    { text: 'API', link: '/api/' }
122
  ]
123
}
124
```
125

126
### DropdownLink Component
127

128
Dropdown menu component for grouped navigation items with hover and keyboard navigation support.
129

130
```javascript { .api }
131
/**
132
 * Dropdown navigation menu Vue component
133
 * Available as @theme/components/DropdownLink.vue  
134
 */
135
const DropdownLink: VueComponent = {
136
  name: 'DropdownLink',
137
  props: {
138
    item: {
139
      type: Object,
140
      required: true
141
    }
142
  },
143
  data() {
144
    return {
145
      open: Boolean
146
    };
147
  },
148
  computed: {
149
    dropdownAriaLabel: String
150
  },
151
  methods: {
152
    toggle(): void,
153
    isLastItemOfArray(item: NavItem, array: NavItem[]): boolean
154
  }
155
};
156
```
157

158
**Props:**
159

160
- `item` (Object, required): Navigation item with nested items array
161

162
### DropdownTransition Component
163

164
Animation wrapper component for dropdown menu transitions.
165

166
```javascript { .api }
167
/**
168
 * Dropdown animation transition wrapper Vue component
169
 * Available as @theme/components/DropdownTransition.vue
170
 */
171
const DropdownTransition: VueComponent = {
172
  name: 'DropdownTransition',
173
  functional: true
174
};
175
```
176

177
**Usage:**
178

179
```vue
180
<template>
181
  <DropdownTransition>
182
    <ul v-show="open" class="dropdown-menu">
183
      <!-- dropdown content -->
184
    </ul>
185
  </DropdownTransition>
186
</template>
187
```
188

189
## Navigation Configuration
190

191
Configure navigation through themeConfig:
192

193
```javascript
194
// VuePress config
195
module.exports = {
196
  themeConfig: {
197
    // Navigation bar items
198
    nav: [
199
      { text: 'Home', link: '/' },
200
      { text: 'Guide', link: '/guide/' },
201
      {
202
        text: 'Learn More',
203
        items: [
204
          { text: 'FAQ', link: '/faq/' },
205
          { text: 'Glossary', link: '/glossary/' }
206
        ]
207
      }
208
    ],
209
    
210
    // Site logo
211
    logo: '/hero.png',
212
    
213
    // Repository link
214
    repo: 'vuejs/vuepress',
215
    repoLabel: 'GitHub',
216
    
217
    // Edit links
218
    editLinks: true,
219
    editLinkText: 'Edit this page on GitHub'
220
  }
221
}
222
```
223

224
## Responsive Behavior
225

226
Navigation components automatically adapt to mobile screens:
227

228
- Navigation links collapse into hamburger menu on mobile
229
- Dropdown menus convert to accordion-style navigation
230
- Touch-friendly interaction areas
231
- Keyboard navigation support for accessibility