Navigation elements including menus, breadcrumbs, tabs, and pagination for building intuitive user interfaces with clear information hierarchy.
Hierarchical navigation menus with support for nested submenus, icons, and active state management.
/**
* Main menu component for navigation
*/
const Menu = Vue.component;
interface MenuProps {
mode?: 'horizontal' | 'vertical';
collapse?: boolean;
backgroundColor?: string;
textColor?: string;
activeTextColor?: string;
defaultActive?: string;
defaultOpeneds?: array;
uniqueOpened?: boolean;
menuTrigger?: 'hover' | 'click';
router?: boolean;
collapseTransition?: boolean;
}
/**
* Submenu container for nested menu items
*/
const Submenu = Vue.component;
interface SubmenuProps {
index: string;
popperClass?: string;
showTimeout?: number;
hideTimeout?: number;
disabled?: boolean;
popperAppendToBody?: boolean;
}
/**
* Individual menu item
*/
const MenuItem = Vue.component;
interface MenuItemProps {
index?: string;
route?: string | object;
disabled?: boolean;
}
/**
* Menu item group for organizing related items
*/
const MenuItemGroup = Vue.component;
interface MenuItemGroupProps {
title?: string;
}Usage Examples:
// Vertical menu
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span>
</el-menu-item>
</el-menu>
// Horizontal menu
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
</el-submenu>
<el-menu-item index="3" disabled>Info</el-menu-item>
</el-menu>
// Collapsible menu
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
:collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">Navigator One</span>
</template>
<el-menu-item index="1-1">item one</el-menu-item>
</el-submenu>
</el-menu>Tab navigation for organizing content into switchable panels with support for closable tabs and custom content.
/**
* Tabs container component
*/
const Tabs = Vue.component;
interface TabsProps {
value?: string;
type?: 'card' | 'border-card';
closable?: boolean;
addable?: boolean;
editable?: boolean;
tabPosition?: 'top' | 'right' | 'bottom' | 'left';
stretch?: boolean;
beforeLeave?: Function;
}
/**
* Individual tab pane content
*/
const TabPane = Vue.component;
interface TabPaneProps {
label?: string;
disabled?: boolean;
name?: string;
closable?: boolean;
lazy?: boolean;
}Usage Examples:
// Basic tabs
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
// Card style tabs
<el-tabs type="card" @tab-click="handleClick">
<el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
// Closable tabs
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name">
{{item.content}}
</el-tab-pane>
</el-tabs>
// Custom tab content
<el-tabs>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> Route</span>
Route
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
</el-tabs>Breadcrumb trail showing the current location within a navigational hierarchy.
/**
* Breadcrumb container component
*/
const Breadcrumb = Vue.component;
interface BreadcrumbProps {
separator?: string;
separatorClass?: string;
}
/**
* Individual breadcrumb item
*/
const BreadcrumbItem = Vue.component;
interface BreadcrumbItemProps {
to?: string | object;
replace?: boolean;
}Usage Examples:
// Basic breadcrumb
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
// Icon separator
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>Dropdown menus for secondary navigation and action menus.
/**
* Dropdown trigger and container
*/
const Dropdown = Vue.component;
interface DropdownProps {
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
size?: 'large' | 'medium' | 'small' | 'mini';
splitButton?: boolean;
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
trigger?: 'hover' | 'click' | 'contextmenu';
hideOnClick?: boolean;
showTimeout?: number;
hideTimeout?: number;
tabindex?: number;
}
/**
* Dropdown menu container
*/
const DropdownMenu = Vue.component;
/**
* Individual dropdown menu item
*/
const DropdownItem = Vue.component;
interface DropdownItemProps {
command?: string | number | object;
disabled?: boolean;
divided?: boolean;
icon?: string;
}Usage Examples:
// Basic dropdown
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c" disabled>Action 3</el-dropdown-item>
<el-dropdown-item command="d" divided>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
// Split button dropdown
<el-dropdown split-button type="primary" @click="handleClick" @command="handleCommand">
Dropdown List
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
// Right-click context menu
<el-dropdown trigger="contextmenu">
<span class="el-dropdown-link">
Right click
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>Pagination controls for navigating through large datasets with customizable layout and sizing options.
/**
* Pagination component for data navigation
*/
const Pagination = Vue.component;
interface PaginationProps {
small?: boolean;
background?: boolean;
pageSize?: number;
total?: number;
pageCount?: number;
pagerCount?: number;
currentPage?: number;
layout?: string;
pageSizes?: array;
popperClass?: string;
prevText?: string;
nextText?: string;
disabled?: boolean;
hideOnSinglePage?: boolean;
}Usage Examples:
// Basic pagination
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
// Small pagination
<el-pagination
small
layout="prev, pager, next"
:total="50">
</el-pagination>
// Custom layout
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
// Complete pagination
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>Page header component with navigation and action areas for page-level navigation.
/**
* Page header with back navigation and title
*/
const PageHeader = Vue.component;
interface PageHeaderProps {
title?: string;
content?: string;
}Usage Examples:
// Basic page header
<el-page-header @back="goBack" content="Detail">
</el-page-header>
// Custom content
<el-page-header @back="goBack">
<template slot="content">
<span>Detail</span>
</template>
</el-page-header>
// With title and content
<el-page-header
title="Back"
content="Detail page description">
</el-page-header>