SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssyncfusion-vue-navigations

syncfusion-vue-navigations

Frontend & websites

View repository

Updated 10-16 09:34

About this skill

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...

  • 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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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    # 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