Navigation

Navbar

[[ ... ]] creates an inline container. Separate sections with |. The first item becomes the brand/logo.

[[ Logo | [Home](./index.md) | Products | Pricing | Login | [Sign Up]* ]]

Active state

Wrap an item in *asterisks* to mark it as the active/current page:

[[ Logo | Home | *Products* | About | Contact ]]

With icon and buttons

Use :icon: for the brand logo and embed [Button] items for actions:

[[ :logo: Brand | Home | Features | Pricing | [Sign In] | [Get Started]* ]]

Navigation Select

A select with linked options becomes a navigation select. Use it for compact navigation where a full navbar or sidebar would take too much space, such as an app switcher or workspace switcher.

Switch app
[Switch app                v]
- [Jira](./jira.md)
- [Confluence](./confluence.md)
- [Bitbucket](./bitbucket.md)

Breadcrumbs

Use [[ ... ]] with > separators for breadcrumb trails.

TODO: crumb items render as <ahref="#"> — real URLs not supported yet; see [Text](url) syntax proposal in renderer

[[ Home > Settings > Profile ]]

Sidebar Nav

::: sidebar creates a vertical nav panel. When followed by page content, it automatically forms a sidebar + main layout.

::: sidebar
**App**

#### Main
[Dashboard]*
[Projects]
[Tasks]
[Calendar]

#### Account
[Settings]
[Billing]

---

[Logout]
:::

Pagination

[← Prev] [1]* [2] [3] [4] [Next →]

Syntax

[[ Brand | Link | Link | [Action]* ]]    navbar

[Switch app                v]            navigation select
- [Jira](./jira.md)
- [Confluence](./confluence.md)

[[ Home > Section > Page ]]              breadcrumb
::: sidebar                              sidebar nav
[Link]*
[Link]
:::