tessl/npm--vuepress--theme-default
Default theme for VuePress providing navigation, sidebar, search, and responsive documentation layouts
—
navigation.mddocs/
Navigation Components
Navigation bar and dropdown menu components providing site-wide navigation with responsive design, active state handling, and dropdown menu support.
Capabilities
Navbar Component
Main navigation bar component that contains site title, navigation links, and responsive mobile menu toggle.
/**
* Main navigation bar Vue component
* Available as @theme/components/Navbar.vue
*/
const Navbar: VueComponent = {
name: 'Navbar',
props: {},
emits: ['toggle-sidebar']
};Usage:
<template>
<Navbar @toggle-sidebar="handleSidebarToggle" />
</template>NavLinks Component
Container component for navigation links that handles responsive layout and link grouping.
/**
* Navigation links container Vue component
* Available as @theme/components/NavLinks.vue
*/
const NavLinks: VueComponent = {
name: 'NavLinks',
props: {},
computed: {
userLinks: Array,
nav: Array,
userLinksTitle: String
}
};NavLink Component
Individual navigation link component with support for internal and external links.
/**
* Individual navigation link Vue component
* Available as @theme/components/NavLink.vue
*/
const NavLink: VueComponent = {
name: 'NavLink',
props: {
item: {
type: Object,
required: true
}
},
computed: {
link: String,
exact: Boolean,
isNonHttpURI: Boolean,
isBlankTarget: Boolean,
isInternal: Boolean
}
};Props:
item(Object, required): Navigation item configuration
Item Structure:
interface NavItem {
/** Display text for the navigation item */
text: string;
/** Link URL (internal or external) */
link?: string;
/** Nested navigation items for dropdown */
items?: NavItem[];
/** Link target attribute */
target?: string;
/** Link rel attribute */
rel?: string;
/** Aria label for accessibility */
ariaLabel?: string;
}Usage Examples:
// Simple navigation link
{
text: 'Home',
link: '/'
}
// External link
{
text: 'GitHub',
link: 'https://github.com/vuejs/vuepress',
target: '_blank'
}
// Dropdown with nested items
{
text: 'Documentation',
items: [
{ text: 'Guide', link: '/guide/' },
{ text: 'API', link: '/api/' }
]
}DropdownLink Component
Dropdown menu component for grouped navigation items with hover and keyboard navigation support.
/**
* Dropdown navigation menu Vue component
* Available as @theme/components/DropdownLink.vue
*/
const DropdownLink: VueComponent = {
name: 'DropdownLink',
props: {
item: {
type: Object,
required: true
}
},
data() {
return {
open: Boolean
};
},
computed: {
dropdownAriaLabel: String
},
methods: {
toggle(): void,
isLastItemOfArray(item: NavItem, array: NavItem[]): boolean
}
};Props:
item(Object, required): Navigation item with nested items array
DropdownTransition Component
Animation wrapper component for dropdown menu transitions.
/**
* Dropdown animation transition wrapper Vue component
* Available as @theme/components/DropdownTransition.vue
*/
const DropdownTransition: VueComponent = {
name: 'DropdownTransition',
functional: true
};Usage:
<template>
<DropdownTransition>
<ul v-show="open" class="dropdown-menu">
<!-- dropdown content -->
</ul>
</DropdownTransition>
</template>Navigation Configuration
Configure navigation through themeConfig:
// VuePress config
module.exports = {
themeConfig: {
// Navigation bar items
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Learn More',
items: [
{ text: 'FAQ', link: '/faq/' },
{ text: 'Glossary', link: '/glossary/' }
]
}
],
// Site logo
logo: '/hero.png',
// Repository link
repo: 'vuejs/vuepress',
repoLabel: 'GitHub',
// Edit links
editLinks: true,
editLinkText: 'Edit this page on GitHub'
}
}Responsive Behavior
Navigation components automatically adapt to mobile screens:
- Navigation links collapse into hamburger menu on mobile
- Dropdown menus convert to accordion-style navigation
- Touch-friendly interaction areas
- Keyboard navigation support for accessibility
Install with Tessl CLI
npx tessl i tessl/npm--vuepress--theme-default