| name | syncfusion-vue-navigations |
| description | Guides Syncfusion Vue 3 navigation components such as AppBar, Accordion, Breadcrumb, Sidebar, and Tabs. Use this when building responsive menus, tabbed layouts, and step-based workflows with Vue 3 Composition API. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29","category":"Navigation Components"} |
Syncfusion Vue 3 Navigation Components
📌 Agent Notice: 📄 Read: links in Navigation Guide sections are reference pointers for passive file reading only. They do not imply automatic tool invocation, command execution, or action chaining.
Overview
This consolidated skill provides comprehensive guidance for implementing 11 Syncfusion Vue 3 navigation components that work together to build complete navigation ecosystems. Whether you're building single navigation features or complex multi-level navigation systems, this skill covers all components, patterns, accessibility requirements, and best practices.
Components Included
| Component | Purpose | Best For |
|---|
| AppBar | Top/bottom navigation header | Application chrome, branding, action buttons |
| Accordion | Expandable/collapsible content panels | FAQs, settings panels, content organization |
| Breadcrumb | Hierarchical location indicator | Site navigation trails, file paths |
| Carousel | Rotating content/image display | Image galleries, testimonials, product showcases |
| ContextMenu | Right-click popup menu | File operations, data grid actions |
| Menu | Hierarchical dropdown navigation | Application menus, navigation bars |
| Sidebar | Side-slide navigation panel | Responsive menus, drawer navigation |
| Tabs | Tab-based content switching | Multi-view layouts, wizard steps |
| Toolbar | Command/button bar | Editing tools, action groups |
| TreeView | Hierarchical node display | File explorers, organizational charts |
| Stepper | Step-by-step workflow guide | Wizards, checkout flows, onboarding |
Quick Component Selector
Need to build...
AppBar
Purpose: Create responsive navigation headers and toolbars at the top or bottom of your application.
When to Use:
- Application header/chrome with branding
- Navigation buttons and action buttons
- Sticky navigation that stays visible while scrolling
- Responsive toolbars that adapt to screen size
- Dark/light/primary color modes
Key Props:
colorMode - Light, Dark, Primary, Inheritmode - Regular, Prominent, Denseposition - Top, BottomisSticky - Stick to viewport while scrolling
Documentation:
Quick Example:
<template>
<ejs-appbar color-mode="Primary">
<button class="e-btn e-inherit e-icon-btn">
<span class="e-icons e-menu"></span>
</button>
<span>My App</span>
<div class="e-appbar-spacer"></div>
<button class="e-btn e-inherit">Login</button>
</ejs-appbar>
</template>
<script setup>
import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
</script>
Accordion
Purpose: Display collapsible content panels for organizing information into expandable sections.
When to Use:
- FAQ sections with question/answer pairs
- Settings panels with collapsible options
- Multi-step forms
- Content organization
- Navigation with expandable items
Key Props:
expandMode - Single, MultipleexpandedIndices - Initially expanded itemsanimation - Configure expand/collapse animationsdataSource - Bind accordion items to data
Documentation:
Quick Example:
<template>
<ejs-accordion :expandMode="'Multiple'">
<e-accordion-items>
<e-accordion-item header="Question 1" content="Answer 1" />
<e-accordion-item header="Question 2" content="Answer 2" />
</e-accordion-items>
</ejs-accordion>
</template>
<script setup>
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-vue-navigations';
</script>
Breadcrumb
Purpose: Display hierarchical navigation path showing user's current location.
When to Use:
- Website breadcrumb trails
- File path display
- Navigation history
- Multi-level category display
- Link-based navigation
Key Props:
items - Array of breadcrumb items with text and URLsenableNavigation - Enable/disable click navigationmaxItems - Maximum items before overflowoverflowMode - Menu, Collapsed, Scroll, etc.
Documentation:
Quick Example:
<template>
<ejs-breadcrumb :items="items"></ejs-breadcrumb>
</template>
<script setup>
import { ref } from 'vue';
import { BreadcrumbComponent } from '@syncfusion/ej2-vue-navigations';
const items = ref([
{ text: 'Home', url: '/' },
{ text: 'Products', url: '/products' },
{ text: 'Electronics', url: '/products/electronics' }
]);
</script>
Carousel
Purpose: Display rotating/sliding content such as images, testimonials, or product showcases.
When to Use:
- Image galleries with auto-play
- Product carousels
- Testimonial sliders
- Content rotators
- Image presentations
Key Props:
selectedIndex - Currently active slideitemsPerSlide - Items visible at onceautoPlay - Auto-rotate slidesshowNavigators - Previous/next buttonsshowIndicators - Slide indicators
Documentation:
Quick Example:
<template>
<ejs-carousel :selectedIndex="0">
<e-carousel-items>
<e-carousel-item>
<img src="image1.jpg" />
</e-carousel-item>
<e-carousel-item>
<img src="image2.jpg" />
</e-carousel-item>
</e-carousel-items>
</ejs-carousel>
</template>
<script setup>
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from '@syncfusion/ej2-vue-navigations';
</script>
ContextMenu
Purpose: Display popup menus triggered by right-click or context actions.
When to Use:
- Right-click context menus
- File explorer operations
- Data grid row actions
- Custom action menus
- Mobile touch-hold menus
Key Props:
items - Menu items with nested structuretarget - Element selector to attach menu toenableHtmlSanitizer - Security for user contentenableRtl - Right-to-left support
Documentation:
Quick Example:
<template>
<div id="target" @contextmenu.prevent>
Right-click here
</div>
<ejs-contextmenu :items="menuItems" target="#target"></ejs-contextmenu>
</template>
<script setup>
import { ref } from 'vue';
import { ContextMenuComponent } from '@syncfusion/ej2-vue-navigations';
const menuItems = ref([
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]);
</script>
Menu
Purpose: Create hierarchical dropdown menus for navigation and selection.
When to Use:
- Application menus (File, Edit, Help)
- Navigation bars
- Dropdown menus
- Submenu hierarchies
- Hamburger/mobile menus
Key Props:
items - Menu items with hierarchical structurehamburgerMode - Mobile-friendly modeenableScrolling - Scrollable menusorientation - Horizontal or Vertical
Documentation:
Quick Example:
<template>
<ejs-menu :items="menuItems"></ejs-menu>
</template>
<script setup>
import { ref } from 'vue';
import { MenuComponent } from '@syncfusion/ej2-vue-navigations';
const menuItems = ref([
{
text: 'File',
items: [
{ text: 'New' },
{ text: 'Open' },
{ text: 'Save' }
]
}
]);
</script>
Sidebar
Purpose: Create slide-out side navigation panels.
When to Use:
- Mobile-responsive navigation
- Drawer menus
- Side panel navigation
- Dashboard sidebars
- Content organization sidebars
Key Props:
type - Over, Push, Slide, Autowidth - Sidebar widthenableGestures - Touch/swipe supportisOpen - Open/closed state
Documentation:
Quick Example:
<template>
<ejs-sidebar width="250px" type="Over" :isOpen="isOpen" @change="toggleSidebar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</ejs-sidebar>
<button @click="toggleSidebar">☰ Menu</button>
</template>
<script setup>
import { ref } from 'vue';
import { SidebarComponent } from '@syncfusion/ej2-vue-navigations';
const isOpen = ref(false);
const toggleSidebar = () => { isOpen.value = !isOpen.value; };
</script>
Tabs
Purpose: Organize content into tabbed sections.
When to Use:
- Multi-view interfaces
- Tabbed content organization
- Step-by-step wizards
- Settings panels
- Responsive content switching
Key Props:
headerPlacement - Top, Bottom, Left, RightselectedItem - Active tab indexallowDragAndDrop - Reorderable tabsheightAdjustMode - Auto, Content, Fill
Documentation:
Quick Example:
<template>
<ejs-tab>
<e-tab-items>
<e-tab-item :header="{ text: 'Tab 1' }">
<template #content>Content 1</template>
</e-tab-item>
<e-tab-item :header="{ text: 'Tab 2' }">
<template #content>Content 2</template>
</e-tab-item>
</e-tab-items>
</ejs-tab>
</template>
<script setup>
import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-vue-navigations';
</script>
Toolbar
Purpose: Create command bars with buttons, separators, and input components.
When to Use:
- Text editor toolbars
- File operation commands
- Format/styling buttons
- Application command bars
- Tool buttons with icons
Key Props:
items - Button, Separator, Input typesoverflowMode - Scrollable, Popup, MultiRow, Extendedwidth - Toolbar widthallowKeyboard - Keyboard navigation
Documentation:
Quick Example:
<template>
<ejs-toolbar>
<e-items>
<e-item text="Cut"></e-item>
<e-item text="Copy"></e-item>
<e-item type="Separator"></e-item>
<e-item text="Bold"></e-item>
</e-items>
</ejs-toolbar>
</template>
<script setup>
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-vue-navigations';
</script>
TreeView
Purpose: Display hierarchical data in a tree structure with nodes.
When to Use:
- File explorers
- Organizational charts
- Category/product hierarchies
- Navigation trees
- Data hierarchies with selection
Key Props:
fields - Data field mappingsallowMultiSelection - Single/multi-selectallowDragAndDrop - Reorderable nodesshowCheckBox - Checkbox selection
Documentation:
Quick Example:
<template>
<ejs-treeview
:fields="{ dataSource: data, id: 'id', text: 'name', parentID: 'pid' }"
:allowMultiSelection="true"
></ejs-treeview>
</template>
<script setup>
import { ref } from 'vue';
import { TreeViewComponent } from '@syncfusion/ej2-vue-navigations';
const data = ref([
{ id: 1, name: 'Parent', pid: null },
{ id: 2, name: 'Child 1', pid: 1 },
{ id: 3, name: 'Child 2', pid: 1 }
]);
</script>
Stepper
Purpose: Guide users through multi-step processes or workflows.
When to Use:
- Checkout wizards
- Registration flows
- Setup wizards
- Multi-step forms
- Onboarding processes
Key Props:
steps - Array of step definitionsactiveStep - Currently active steporientation - Horizontal or VerticalstepType - Default, Label, Indicator
Documentation:
Quick Example:
<template>
<ejs-stepper :steps="steps" :activeStep="activeStep"></ejs-stepper>
</template>
<script setup>
import { ref } from 'vue';
import { StepperComponent } from '@syncfusion/ej2-vue-navigations';
const steps = ref([
{ text: 'Step 1' },
{ text: 'Step 2' },
{ text: 'Step 3' }
]);
const activeStep = ref(0);
</script>
Common Vue 3 Patterns Across All Components
Reactive State Management
<script setup>
import { ref, reactive } from 'vue';
// Simple reactive value
const selectedIndex = ref(0);
// Complex object state
const config = reactive({
enabled: true,
cssClass: 'e-primary',
animation: { duration: 300 }
});
</script>
Event Handling
<template>
<ejs-component @select="handleSelect" @created="onCreated" />
</template>
<script setup>
const handleSelect = (args) => {
console.log('Selected:', args.index);
};
const onCreated = () => {
console.log('Component initialized');
};
</script>
Template Refs for Method Calls
<template>
<button @click="callMethod">Action</button>
<ejs-component ref="componentRef" />
</template>
<script setup>
import { ref } from 'vue';
const componentRef = ref(null);
const callMethod = () => {
componentRef.value?.methodName?.();
};
</script>
Computed Properties for Derived State
<template>
<ejs-component :disabled="isLoading" />
</template>
<script setup>
import { ref, computed } from 'vue';
const status = ref('idle');
const isLoading = computed(() => status.value === 'loading');
</script>
Installation and Setup
Install All Required Packages
npm install @syncfusion/ej2-vue-navigations @syncfusion/ej2-base
npm install @syncfusion/ej2-vue-buttons
npm install @syncfusion/ej2-vue-popups
CSS Imports (Pick a theme)
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-vue-navigations/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
Accessibility Across All Components
- WCAG 2.2 Level AA compliance
- Keyboard Navigation: Arrow keys, Tab, Enter, Escape
- ARIA Attributes: Proper roles and labels
- Screen Reader Support: Full compatibility
- RTL Support: Right-to-left language support
- Color Contrast: Meets accessibility standards
- Focus Management: Clear focus indicators
Next Steps
- Choose your component from the component selector above
- Read the Getting Started reference for basic setup
- Explore specific features using the documentation links
- Review examples for your use case
- Check Accessibility guide for WCAG compliance
- Consult API Reference for complete property/event documentation
Related Resources
