The navs component includes a list of links that users use to move between sections of the application. They are often used in the app bar of your application or in your sidebar.
Color
Set the color of the nav.
| Type | Default Value |
|---|
| string | null |
<Stak Vertical Gutter="4">
<NVNav>
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Color="primary">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Color="secondary">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Color="success">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Color="error">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
</Stak>
<div class="nv-stack nv-stack-vertical gutter-y-4">
<nav class="nv-nav nv-nav-level-1 neutral">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-1 primary">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-1 secondary">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-1 success">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-1 error">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
</div>
<nv-stack gutter="4" vertical>
<nv-nav>
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav color="primary">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav color="secondary">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav color="success">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav color="error">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
</nv-stack>
<NvStack gutter={4} vertical>
<NvNav color="neutral">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav color="primary">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav color="secondary">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav color="error">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav color="success">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
</NvStack>
Gutter
Set spacing between items in the nav.
Gutter apply an horizontal separation by default, but when Vertical is set to true, will apply a vertical separation between links.
| Type | Default Value |
|---|
| string | null |
<NVNav Gutter="1" Margin=". . 6">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Vertical Gutter="1">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<nav class="nv-nav nv-nav-level-1 neutral gutter-x-1 mb-6">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nav class="nv-nav nv-nav-level-1 nv-nav-vertical neutral gutter-y-1">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nv-nav gutter="1" margin=". . 6">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav vertical gutter="1">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<NvNav gutter="1" margin=". . 6">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav vertical gutter="1">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
Level
Set the level of the nav.
<Stak Vertical Gutter="4">
<NVNav Color="primary">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Level="2" Color="primary">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<NVNav Level="3" Color="primary">
<NVLink Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
</Stak>
<div class="nv-stack nv-stack-vertical gutter-y-4">
<nav class="nv-nav nv-nav-level-1 primary">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-2 primary">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
<nav class="nv-nav nv-nav-level-3 primary">
<a class="nv-link is-active" href="#">link 1</a>
<a class="nv-link" href="#">link 2</a>
<a class="nv-link" href="#">link 3</a>
</nav>
</div>
<nv-stack gutter="4" vertical>
<nv-nav>
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav level="2">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav level="3">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
</nv-stack>
<NvStack gutter={4} vertical>
<NvNav>
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav level="2">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
<NvNav level="3">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
</NvStack>
Pad
Set spacing within links in the nav. If the value is set to 1, it will apply internally a ChildPadding="1 2" to the nav.
| Type | Default Value |
|---|
| string | null |
<NVNav Pad="5" Gutter="1" Margin=". . 6">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<nav class="nv-nav nv-nav-level-1 neutral gutter-x-1 mb-6 cpx-10 cpy-5">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nv-nav pad="5" gutter="1" margin=". . 6">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<NvNav pad="5" gutter="1" margin=". . 6">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
Pill
Set the shape of the nav to 'Pill'
| Type | Default Value |
|---|
| bool | false |
<NVNav Pill Gutter="1">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<nav class="nv-nav nv-nav-pill nv-nav-level-1 neutral gutter-x-1">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nv-nav pill gutter="1">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<NvNav pill gutter="1">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
Square
Set the shape of the nav to 'Square'
| Type | Default Value |
|---|
| bool | false |
<NVNav Square Gutter="1">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<nav class="nv-nav nv-nav-square nv-nav-level-1 neutral gutter-x-1">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nv-nav square gutter="1">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<NvNav square gutter="1">
<NvLink href="#" isActive={true}> link 1 </NvLink>
<NvLink href="#">link 2</NvLink>
<NvLink href="#">link 3</NvLink>
</NvNav>
Vertical
Will display the nav vertically. Will also change the Gutter axe.
| Type | Default Value |
|---|
| bool | false |
<NVNav Vertical Gutter="1">
<NVLink IsActive Href="#">link 1</NVLink>
<NVLink Href="#">link 2</NVLink>
<NVLink Href="#">link 3</NVLink>
</NVNav>
<nav class="nv-nav nv-nav-vertical nv-nav-level-1 neutral gutter-y-1">
<a class="nv-link is-active" href="#">item 1</a>
<a class="nv-link" href="#">item 2</a>
<a class="nv-link" href="#">item 3</a>
</nav>
<nv-nav vertical gutter="1">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
<nv-nav vertical gutter="1">
<nv-link href="#" isactive="true">link 1</nv-link>
<nv-link href="#">link 2</nv-link>
<nv-link href="#">link 3</nv-link>
</nv-nav>
