# Elements: Navigation, further examples

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator.

The element sections in `elements-navigation.md` show the first example of each element; these are the rest.

## `pk-link`

Example: Variants

```html
<pk-link href="/reports">Reports</pk-link>
<pk-link href="/reports" variant="muted">Reports</pk-link>
<pk-link href="/reports" variant="plain">Reports</pk-link>
```

Example: Current page and a new tab

```html
<pk-link href="/orders" current>Orders</pk-link>
<pk-link href="https://example.com/help" target="_blank" rel="noopener noreferrer">Help centre</pk-link>
```

Example: An app route

```html
<pk-link to="/orders/7">Order 7</pk-link>
```

## `pk-nav-item`

Example: Your own link (works without JavaScript)

```html
<nav aria-label="Example"><ul><li><pk-nav-item current><a href="#" aria-current="page">Reports</a></pk-nav-item></li><li><pk-nav-item><a href="#">Settings</a></pk-nav-item></li></ul></nav>
```

## `pk-navbar`

Example: Navbar with pk-nav-item rows

```html
<pk-navbar label="Main"><a slot="brand" href="#">Brand</a><pk-nav-item href="#" current>Dashboard</pk-nav-item><pk-nav-item href="#">Orders</pk-nav-item><pk-nav-item href="#" disabled>Reports</pk-nav-item></pk-navbar>
```

Example: Navbar with a mega menu

```html
<pk-navbar label="Main"><a slot="brand" href="#">Brand</a><pk-dropdown mega><pk-button slot="trigger" variant="ghost">Products</pk-button><pk-menu-item type="header">Catalog</pk-menu-item><pk-menu-item href="#">All products</pk-menu-item><pk-menu-item href="#">Drafts</pk-menu-item><pk-menu-item type="header">Stock</pk-menu-item><pk-menu-item href="#">Receiving</pk-menu-item><pk-menu-item href="#">Adjustments</pk-menu-item></pk-dropdown><a href="#">Orders</a></pk-navbar>
```

## `pk-pagination`

Example: Simple and load more

```html
<pk-pagination mode="simple" page="2" pages="9"></pk-pagination>
<pk-pagination mode="load-more"></pk-pagination>
```

## `pk-side-nav`

Example: Active route: current-path resolves the current row and, with auto-expand-active, opens its branch

```html
<pk-side-nav label="Main" current-path="/users/settings/profile" auto-expand-active><a slot="brand" href="#">Brand</a><pk-nav-item href="/dashboard">Dashboard</pk-nav-item><pk-nav-item href="/users-archive">Archive</pk-nav-item><pk-nav-item>Users<pk-nav-item slot="children" href="/users">All users</pk-nav-item><pk-nav-item slot="children">Settings<pk-nav-item slot="children" href="/users/settings/profile">Profile</pk-nav-item><pk-nav-item slot="children" href="/users/settings/security">Security</pk-nav-item></pk-nav-item></pk-nav-item></pk-side-nav>
```

## `pk-stepper`

Example: Vertical stepper with an error

```html
<pk-stepper label="Import" current="2" orientation="vertical" errors="0"><pk-step heading="Upload" description="File rejected"></pk-step><pk-step heading="Map columns"></pk-step><pk-step heading="Review"></pk-step><pk-step heading="Finish"></pk-step></pk-stepper>
```

## `pk-tabs`

Example: Scrolling strip with counts and trailing content

```html
<pk-tabs overflow="scroll" value="a">
  <pk-tab value="a" count="12">Pending</pk-tab>
  <pk-tab value="b" count="3">Failed</pk-tab>
  <pk-tab value="c">Done</pk-tab>
  <span slot="trailing">Updated a minute ago</span>
</pk-tabs>
```

Example: Overflow menu

```html
<pk-tabs overflow="menu" value="a">
  <pk-tab value="a">Console</pk-tab>
  <pk-tab value="b">Logs</pk-tab>
  <pk-tab value="c">Logging</pk-tab>
  <pk-tab value="d">Performance</pk-tab>
  <pk-tab value="e">Quality</pk-tab>
  <pk-tab value="f">Inspector</pk-tab>
  <pk-tab value="g">Theme</pk-tab>
  <pk-tab value="h">Layout builder</pk-tab>
</pk-tabs>
```

## `pk-tree-item`

Example: Link rows (a page-local navigation tree)

```html
<pk-tree label="Pages" value="Setup"><pk-tree-item label="Guides" expanded><pk-tree-item label="Setup" href="#setup"></pk-tree-item><pk-tree-item label="Theming" href="#theming"></pk-tree-item></pk-tree-item></pk-tree>
```