Syncfusion Vue Navigations

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

Quick Component Selector

Need to build...

• Top/bottom action bar? → AppBar
• Expandable content sections? → Accordion
• Breadcrumb trail? → Breadcrumb
• Image/content carousel? → Carousel
• Right-click menu? → ContextMenu
• Dropdown menus? → Menu
• Slide-out drawer? → Sidebar
• Tabbed interface? → Tabs
• Toolbar with buttons? → Toolbar
• File/tree hierarchy? → TreeView
• Multi-step wizard? → Stepper

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, Inherit
• mode - Regular, Prominent, Dense
• position - Top, Bottom
• isSticky - Stick to viewport while scrolling

Documentation:

• 📄 Read: references/appbar-getting-started.md - Installation and setup
• 📄 Read: references/appbar-positioning-and-layout.md - Layout and positioning
• 📄 Read: references/appbar-size-and-color-modes.md - Styling modes
• 📄 Read: references/appbar-design-patterns.md - Integration patterns
• 📄 Read: references/appbar-styling-and-accessibility.md - Accessibility
• 📄 Read: references/appbar-api-reference.md - Complete API

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, Multiple
• expandedIndices - Initially expanded items
• animation - Configure expand/collapse animations
• dataSource - Bind accordion items to data

Documentation:

• 📄 Read: references/accordion-getting-started.md - Installation and setup
• 📄 Read: references/accordion-expand-modes.md - Single vs Multiple mode
• 📄 Read: references/accordion-animation-effects.md - Animations
• 📄 Read: references/accordion-content-loading.md - Dynamic content
• 📄 Read: references/accordion-events-lifecycle.md - Events
• 📄 Read: references/accordion-styling-customization.md - Styling
• 📄 Read: references/accordion-advanced-features.md - Advanced patterns

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 URLs
• enableNavigation - Enable/disable click navigation
• maxItems - Maximum items before overflow
• overflowMode - Menu, Collapsed, Scroll, etc.

Documentation:

• 📄 Read: references/breadcrumb-getting-started.md - Installation and setup
• 📄 Read: references/breadcrumb-navigation-and-routing.md - Navigation patterns
• 📄 Read: references/breadcrumb-customization.md - Customization
• 📄 Read: references/breadcrumb-icon-integration-data-binding.md - Icons and data
• 📄 Read: references/breadcrumb-accessibility.md - Accessibility
• 📄 Read: references/breadcrumb-api-properties-and-events.md - Complete API

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 slide
• itemsPerSlide - Items visible at once
• autoPlay - Auto-rotate slides
• showNavigators - Previous/next buttons
• showIndicators - Slide indicators

Documentation:

• 📄 Read: references/carousel-getting-started.md - Installation and setup
• 📄 Read: references/carousel-populating-items.md - Add slide content
• 📄 Read: references/carousel-navigators-and-indicators.md - Navigation controls
• 📄 Read: references/carousel-animations-and-transitions.md - Transitions
• 📄 Read: references/carousel-styling-and-appearance.md - Styling
• 📄 Read: references/carousel-accessibility.md - Accessibility

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 structure
• target - Element selector to attach menu to
• enableHtmlSanitizer - Security for user content
• enableRtl - Right-to-left support

Documentation:

• 📄 Read: references/contextmenu-getting-started.md - Installation and setup
• 📄 Read: references/contextmenu-menu-items-and-data-binding.md - Menu structure
• 📄 Read: references/contextmenu-events-and-interaction.md - Events
• 📄 Read: references/contextmenu-templates-and-customization.md - Templates
• 📄 Read: references/contextmenu-advanced-features.md - Advanced patterns
• 📄 Read: references/contextmenu-use-cases-and-patterns.md - Real-world patterns

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 structure
• hamburgerMode - Mobile-friendly mode
• enableScrolling - Scrollable menus
• orientation - Horizontal or Vertical

Documentation:

• 📄 Read: references/menu-getting-started.md - Installation and setup
• 📄 Read: references/menu-properties-and-configuration.md - Configuration
• 📄 Read: references/menu-data-binding.md - Data sources
• 📄 Read: references/menu-menu-items-customization.md - Dynamic items
• 📄 Read: references/menu-events-and-callbacks.md - Events
• 📄 Read: references/menu-styling-and-appearance.md - Styling
• 📄 Read: references/menu-hamburger-mode.md - Mobile mode
• 📄 Read: references/menu-methods-api.md - Methods

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, Auto
• width - Sidebar width
• enableGestures - Touch/swipe support
• isOpen - Open/closed state

Documentation:

• 📄 Read: references/sidebar-getting-started.md - Installation and setup
• 📄 Read: references/sidebar-opening-closing.md - Open/close patterns
• 📄 Read: references/sidebar-sidebar-positioning.md - Positioning
• 📄 Read: references/sidebar-content-integration.md - Content integration
• 📄 Read: references/sidebar-styling-customization.md - Styling
• 📄 Read: references/sidebar-accessibility.md - Accessibility
• 📄 Read: references/sidebar-events-reference.md - Events

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, Right
• selectedItem - Active tab index
• allowDragAndDrop - Reorderable tabs
• heightAdjustMode - Auto, Content, Fill

Documentation:

• 📄 Read: references/tabs-getting-started.md - Installation and setup
• 📄 Read: references/tabs-populating-items.md - Tab content
• 📄 Read: references/tabs-header-styling.md - Header styling
• 📄 Read: references/tabs-orientation-overflow.md - Orientation and overflow
• 📄 Read: references/tabs-drag-drop-reordering.md - Drag and drop
• 📄 Read: references/tabs-accessibility-localization.md - Accessibility

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 types
• overflowMode - Scrollable, Popup, MultiRow, Extended
• width - Toolbar width
• allowKeyboard - Keyboard navigation

Documentation:

• 📄 Read: references/toolbar-getting-started.md - Installation and setup
• 📄 Read: references/toolbar-item-configuration.md - Item types
• 📄 Read: references/toolbar-responsive-modes.md - Overflow modes
• 📄 Read: references/toolbar-accessibility.md - Accessibility
• 📄 Read: references/toolbar-styling-customization.md - Styling
• 📄 Read: references/toolbar-advanced-features.md - Templates and components

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 mappings
• allowMultiSelection - Single/multi-select
• allowDragAndDrop - Reorderable nodes
• showCheckBox - Checkbox selection

Documentation:

• 📄 Read: references/treeview-getting-started.md - Installation and setup
• 📄 Read: references/treeview-data-binding.md - Data sources
• 📄 Read: references/treeview-templates-and-rendering.md - Custom templates
• 📄 Read: references/treeview-node-operations.md - CRUD operations
• 📄 Read: references/treeview-selection-and-checking.md - Selection modes
• 📄 Read: references/treeview-drag-drop-and-reordering.md - Drag and drop
• 📄 Read: references/treeview-filtering-and-searching.md - Filtering
• 📄 Read: references/treeview-keyboard-and-accessibility.md - Accessibility

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 definitions
• activeStep - Currently active step
• orientation - Horizontal or Vertical
• stepType - Default, Label, Indicator

Documentation:

• 📄 Read: references/stepper-getting-started.md - Installation and setup
• 📄 Read: references/stepper-steps-and-configuration.md - Step configuration
• 📄 Read: references/stepper-orientations-and-types.md - Layout options
• 📄 Read: references/stepper-events-and-interactions.md - Events
• 📄 Read: references/stepper-linear-flow-and-validation.md - Validation
• 📄 Read: references/stepper-animation-template-tooltip.md - Customization
• 📄 Read: references/stepper-methods-and-advanced.md - Advanced patterns

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 => {
  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    # For AppBar content
npm install @syncfusion/ej2-vue-popups    # For menus/dropdowns

CSS Imports (Pick a theme)

// In main.ts or component
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';

// Available themes: tailwind3.css, bootstrap5.css, material.css, fluent.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

1. Choose your component from the component selector above
2. Read the Getting Started reference for basic setup
3. Explore specific features using the documentation links
4. Review examples for your use case
5. Check Accessibility guide for WCAG compliance
6. Consult API Reference for complete property/event documentation

Related Resources

• Syncfusion Vue Documentation
• Vue 3 Composition API
• WCAG 2.2 Standards
• Accessibility Testing