--- title: Navigation Components group: Component Gallery --- ## Tabs The `` component lets you switch between different Vue components from a object component dictionary where the **Key** is used for the Tab's label and URL param and the **Value** component for the tab body. ```html ``` The Tab's Label can alternatively be overridden with a custom **label** function, e.g: ```html ``` **Tabs properties** ```ts defineProps<{ tabs: {[name:string]:Component } id?: string //= tabs param?: string //= tab - URL param to use label?: (tab:string) => string // - Custom function to resolve Tab Label selected?: string // - The selected tab tabClass?: string // - Additional classes for Tab Label bodyClass?: string // - Classes for Tab Body url?:boolean //= true - Whether to maintain active tab in history.pushState() }>() ``` ## Breadcrumbs Breadcrumb example: ```html gallery Navigation Examples ``` gallery Navigation Examples ## NavList Use `NavList` for rendering a vertical navigation list with Icons: ```html DataGrid Component Examples for rendering tabular data Instant customizable UIs for calling AutoQuery CRUD APIs ```

## Link Buttons Using `href` with Button components will style hyper links to behave like buttons: ```html Blazor Vue Template Vue Component Docs ```

Blazor Vue Template

Vue Component Docs

## PrimaryButton That can use **color** to render it in different colors: ```html Default Blue Purple Red Green Sky Cyan Indigo ```

Default

Blue

Purple

Red

Green

Sky

Cyan

Indigo