Navigation elements for user interface wayfinding including menus, breadcrumbs, pagination, anchors, and step indicators. These components help users understand their location and navigate through applications.
Hierarchical navigation menus with support for horizontal, vertical, and popup modes.
/**
* Menu container component with multiple display modes
*/
export function Menu(props: MenuProps): JSX.Element;
/**
* Individual menu item component
*/
export function MenuItem(props: MenuItemProps): JSX.Element;
/**
* Menu item group for organizing related items
*/
export function MenuItemGroup(props: MenuItemGroupProps): JSX.Element;
/**
* Submenu component for nested navigation
*/
export function SubMenu(props: SubMenuProps): JSX.Element;
// Menu Types
interface MenuProps {
mode?: 'horizontal' | 'vertical' | 'pop' | 'popButton';
theme?: 'light' | 'dark';
levelIndent?: number;
autoScrollIntoView?: boolean;
collapsed?: boolean;
defaultOpenKeys?: string[];
defaultSelectedKeys?: string[];
openKeys?: string[];
selectedKeys?: string[];
accordion?: boolean;
selectable?: boolean;
triggerProps?: Record<string, any>;
tooltipProps?: Record<string, any>;
onMenuItemClick?: (key: string, event: Event) => void;
onSubMenuClick?: (key: string, openKeys: string[], event: Event) => void;
}
interface MenuItemProps {
key: string;
disabled?: boolean;
onClick?: (event: Event) => void;
}
interface MenuItemGroupProps {
title?: string;
}
interface SubMenuProps {
key: string;
title?: string;
disabled?: boolean;
selectable?: boolean;
popup?: boolean;
}Usage Examples:
<template>
<!-- Horizontal menu -->
<a-menu mode="horizontal" :default-selected-keys="['1']">
<a-menu-item key="1">Home</a-menu-item>
<a-menu-item key="2">Products</a-menu-item>
<a-sub-menu key="3" title="About">
<a-menu-item key="3-1">Company</a-menu-item>
<a-menu-item key="3-2">Team</a-menu-item>
</a-sub-menu>
</a-menu>
<!-- Vertical menu with groups -->
<a-menu mode="vertical" style="width: 200px">
<a-menu-item-group title="Navigation">
<a-menu-item key="nav-1">Dashboard</a-menu-item>
<a-menu-item key="nav-2">Analytics</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Settings">
<a-menu-item key="set-1">Profile</a-menu-item>
<a-menu-item key="set-2">Preferences</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>Hierarchical breadcrumb navigation showing the current page's location.
/**
* Breadcrumb container with customizable separators
*/
export function Breadcrumb(props: BreadcrumbProps): JSX.Element;
/**
* Individual breadcrumb item with optional routing
*/
export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;
// Breadcrumb Types
interface BreadcrumbProps {
maxCount?: number;
separator?: string;
routes?: BreadcrumbRoute[];
}
interface BreadcrumbItemProps extends BreadcrumbRoute {
droplist?: BreadcrumbRoute[];
dropdownProps?: Record<string, any>;
}
interface BreadcrumbRoute {
path?: string;
breadcrumbName?: string;
}Usage Examples:
<template>
<!-- Basic breadcrumb -->
<a-breadcrumb>
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>Products</a-breadcrumb-item>
<a-breadcrumb-item>Electronics</a-breadcrumb-item>
</a-breadcrumb>
<!-- Breadcrumb with routes -->
<a-breadcrumb :routes="routes" />
</template>
<script>
export default {
data() {
return {
routes: [
{ path: '/', breadcrumbName: 'Home' },
{ path: '/products', breadcrumbName: 'Products' },
{ breadcrumbName: 'Current Page' }
]
};
}
};
</script>Dropdown menus for actions and navigation with customizable triggers.
/**
* Dropdown container component
*/
export function Dropdown(props: DropdownProps): JSX.Element;
/**
* Dropdown button with integrated trigger
*/
export function DropdownButton(props: DropdownButtonProps): JSX.Element;
/**
* Dropdown option item
*/
export function Doption(props: DOptionProps): JSX.Element;
/**
* Dropdown option group
*/
export function Dgroup(props: DGroupProps): JSX.Element;
/**
* Dropdown submenu
*/
export function Dsubmenu(props: DSubmenuProps): JSX.Element;
// Dropdown Types
interface DropdownProps {
popupVisible?: boolean;
defaultPopupVisible?: boolean;
trigger?: TriggerEvent | TriggerEvent[];
position?: TriggerPosition;
disabled?: boolean;
onSelect?: (value: any, event: Event) => void;
onVisibleChange?: (visible: boolean) => void;
}
interface DropdownButtonProps extends DropdownProps {
type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
size?: Size;
loading?: boolean;
icon?: string;
href?: string;
htmlType?: 'button' | 'submit' | 'reset';
onClick?: (event: Event) => void;
}
interface DOptionProps {
value?: any;
disabled?: boolean;
}
interface DGroupProps {
title?: string;
}
interface DSubmenuProps {
value?: any;
disabled?: boolean;
title?: string;
}Anchor navigation for jumping to page sections with automatic highlighting.
/**
* Anchor container for section navigation
*/
export function Anchor(props: AnchorProps): JSX.Element;
/**
* Individual anchor link to page sections
*/
export function AnchorLink(props: AnchorLinkProps): JSX.Element;
// Anchor Types
interface AnchorProps {
smooth?: boolean;
offsetTop?: number;
offsetBottom?: number;
affix?: boolean;
showInkInFixed?: boolean;
container?: string | HTMLElement;
lineless?: boolean;
onChange?: (hash: string, prevHash: string) => void;
onClick?: (event: Event, hash: string) => void;
}
interface AnchorLinkProps {
href: string;
title?: string;
}Page navigation controls with customizable layouts and functionality.
/**
* Pagination component for large datasets
*/
export function Pagination(props: PaginationProps): JSX.Element;
// Pagination Types
interface PaginationProps {
total?: number;
current?: number;
defaultCurrent?: number;
pageSize?: number;
defaultPageSize?: number;
disabled?: boolean;
hideOnSinglePage?: boolean;
simple?: boolean;
showTotal?: boolean | ((total: number, range: [number, number]) => string);
showMore?: boolean;
showJumper?: boolean;
showPageSize?: boolean;
pageSizeOptions?: number[];
pageSizeProps?: Record<string, any>;
size?: Size;
onChange?: (page: number, pageSize: number) => void;
onPageSizeChange?: (pageSize: number, current: number) => void;
}Step-by-step navigation for multi-step processes and workflows.
/**
* Steps container for process navigation
*/
export function Steps(props: StepsProps): JSX.Element;
/**
* Individual step component
*/
export function Step(props: StepProps): JSX.Element;
// Steps Types
interface StepsProps {
type?: 'default' | 'arrow' | 'dot' | 'navigation';
direction?: 'horizontal' | 'vertical';
labelPlacement?: 'horizontal' | 'vertical';
current?: number;
status?: 'wait' | 'process' | 'finish' | 'error';
lineless?: boolean;
small?: boolean;
changeable?: boolean;
onChange?: (current: number, prevCurrent: number) => void;
}
interface StepProps {
title?: string;
description?: string;
status?: 'wait' | 'process' | 'finish' | 'error';
disabled?: boolean;
}Page header component with breadcrumbs, title, and action areas.
/**
* Page header with title, breadcrumb, and action areas
*/
export function PageHeader(props: PageHeaderProps): JSX.Element;
// PageHeader Types
interface PageHeaderProps {
title?: string;
subtitle?: string;
backIcon?: boolean | string;
breadcrumb?: BreadcrumbProps;
extra?: string;
footer?: string;
onBack?: () => void;
}Usage Examples:
<template>
<!-- Steps navigation -->
<a-steps :current="currentStep" @change="handleStepChange">
<a-step title="Step 1" description="Description 1" />
<a-step title="Step 2" description="Description 2" />
<a-step title="Step 3" description="Description 3" />
</a-steps>
<!-- Pagination -->
<a-pagination
:total="500"
:current="1"
:page-size="10"
show-total
show-jumper
show-page-size
@change="handlePageChange"
/>
<!-- Page header -->
<a-page-header
title="User Settings"
subtitle="Manage your account preferences"
:breadcrumb="{ routes: breadcrumbRoutes }"
@back="goBack"
>
<template #extra>
<a-button type="primary">Save</a-button>
</template>
</a-page-header>
</template>// Instance types for template refs
export type MenuInstance = InstanceType<typeof Menu>;
export type MenuItemInstance = InstanceType<typeof MenuItem>;
export type MenuItemGroupInstance = InstanceType<typeof MenuItemGroup>;
export type MenuSubMenuInstance = InstanceType<typeof SubMenu>;
export type BreadcrumbInstance = InstanceType<typeof Breadcrumb>;
export type BreadcrumbItemInstance = InstanceType<typeof BreadcrumbItem>;
export type DropdownInstance = InstanceType<typeof Dropdown>;
export type DropdownButtonInstance = InstanceType<typeof DropdownButton>;
export type DropdownOptionInstance = InstanceType<typeof Doption>;
export type DropdownGroupInstance = InstanceType<typeof Dgroup>;
export type DropdownSubmenuInstance = InstanceType<typeof Dsubmenu>;
export type AnchorInstance = InstanceType<typeof Anchor>;
export type AnchorLinkInstance = InstanceType<typeof AnchorLink>;
export type PaginationInstance = InstanceType<typeof Pagination>;
export type StepsInstance = InstanceType<typeof Steps>;
export type StepsStepInstance = InstanceType<typeof Step>;
export type PageHeaderInstance = InstanceType<typeof PageHeader>;