Sidebar
The Sidebar component is used to contain navigation, or groups of navigations.
Centered Element
Add the StackItemCenter (MY="auto") parameter to the element you want in the middle.
| Type | Default Value |
|---|---|
<NVSidebar>
<NVNav Vertical Level="1" Color="primary">
<a href="#">lead link</a>
<a href="#">lead link</a>
<a href="#">lead link</a>
</NVNav>
<NVNav StackItemCenter Vertical Level="1" Color="primary">
<a href="#">center link</a>
<a href="#">center link</a>
<a href="#">center link</a>
</NVNav>
<NVNav Vertical Level="1" Color="primary">
<a href="#">tail link</a>
<a href="#">tail link</a>
<a href="#">tail link</a>
</NVNav>
</NVSidebar><div class="nv-sidebar" style="height:640px; width: 312px">
<nav class="nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a class="is-active" href="#">lead link</a>
<a href="#">lead link</a>
<a href="#">lead link</a>
</nav>
<nav class="nv-stack-item-center nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a href="#">center link</a>
<a href="#">center link</a>
<a href="#">center link</a>
</nav>
<nav class="nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a href="#">tail link</a>
<a href="#">tail link</a>
<a href="#">tail link</a>
</nav>
</div><nv-sidebar height="640px" width="312px">
<nv-nav vertical level="1" color="primary">
<nv-link href="#">lead link</nv-link>
<nv-link href="#">lead link</nv-link>
<nv-link href="#">lead link</nv-link>
</nv-nav>
<nv-nav stackitemcenter vertical level="1" color="primary">
<nv-link href="#">center link</nv-link>
<nv-link href="#">center link</nv-link>
<nv-link href="#">center link</nv-link>
</nv-nav>
<nv-nav vertical level="1" color="primary">
<nv-link href="#">tail link</nv-link>
<nv-link href="#">tail link</nv-link>
<nv-link href="#">tail link</nv-link>
</nv-nav>
</nv-sidebar><NvSidebar height="640px" width="312px">
<NvNav vertical level="1" color="primary">
<NvLink href="#">lead link</NvLink>
<NvLink href="#">lead link</NvLink>
<NvLink href="#">lead link</NvLink>
</NvNav>
<NvNav stackItemCenter vertical level="1" color="primary">
<NvLink href="#">center link</NvLink>
<NvLink href="#">center link</NvLink>
<NvLink href="#">center link</NvLink>
</NvNav>
<NvNav vertical level="1" color="primary">
<NvLink href="#">tail link</NvLink>
<NvLink href="#">tail link</NvLink>
<NvLink href="#">tail link</NvLink>
</NvNav>
</NvSidebar>Lead Element
Add the StackItemLead (or MB="auto") parameter to the element you want in the lead.
| Type | Default Value |
|---|---|
<NVSidebar>
<NVNav StackItemLead Vertical Level="1" Color="primary">
<a href="#">lead link</a>
<a href="#">lead link</a>
<a href="#">lead link</a>
</NVNav>
<NVNav Vertical Level="1" Color="primary">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</NVNav>
</NVSidebar><div class="nv-sidebar" style="height:400px; width: 312px">
<nav class="nv-stack-item-lead nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a class="is-active" href="#">lead link</a>
<a href="#">lead link</a>
<a href="#">lead link</a>
</nav>
<nav class="nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</nav>
</div><nv-sidebar height="400px" width="312px">
<nv-nav stackitemlead vertical level="1" color="primary">
<nv-link href="#">lead link</nv-link>
<nv-link href="#">lead link</nv-link>
<nv-link href="#">lead link</nv-link>
</nv-nav>
<nv-nav vertical level="1" color="primary">
<nv-link href="#">link</nv-link>
<nv-link href="#">link</nv-link>
<nv-link href="#">link</nv-link>
</nv-nav>
</nv-sidebar><NvSidebar height="400px" width="312px">
<NvNav stackItemLead vertical level="1" color="primary">
<NvLink href="#">lead link</NvLink>
<NvLink href="#">lead link</NvLink>
<NvLink href="#">lead link</NvLink>
</NvNav>
<NvNav vertical level="1" color="primary">
<NvLink href="#">link</NvLink>
<NvLink href="#">link</NvLink>
<NvLink href="#">link</NvLink>
</NvNav>
</NvSidebar>Tail Element
To put an element as tail add the StackItemTail (or MT="auto") parameter to the element you want in tail.
| Type | Default Value |
|---|---|
<NVSidebar>
<NVNav Vertical Level="1" Color="primary">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</NVNav>
<NVNav StackItemTail Vertical Level="1" Color="primary">
<a href="#">tail link</a>
<a href="#">tail link</a>
<a href="#">tail link</a>
</NVNav>
</NVSidebar><div class="nv-sidebar" style="height:400px; width: 312px">
<nav class="nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a class="is-active" href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</nav>
<nav class="nv-stack-item-tail nv-nav nv-nav-vertical nv-nav-level-1 primary">
<a href="#">tail link</a>
<a href="#">tail link</a>
<a href="#">tail link</a>
</nav>
</div><nv-sidebar height="400px" width="312px">
<nv-nav vertical level="1" color="primary">
<nv-link href="#">link</nv-link>
<nv-link href="#">link</nv-link>
<nv-link href="#">link</nv-link>
</nv-nav>
<nv-nav vertical level="1" color="primary" stackitemtail>
<nv-link href="#">tail link</nv-link>
<nv-link href="#">tail link</nv-link>
<nv-link href="#">tail link</nv-link>
</nv-nav>
</nv-sidebar><NvSidebar height="400px" width="312px">
<NvNav vertical level="1" color="primary">
<NvLink href="#">link</NvLink>
<NvLink href="#">link</NvLink>
<NvLink href="#">link</NvLink>
</NvNav>
<NvNav vertical level="1" color="primary" stackItemTail>
<NvLink href="#">tail link</NvLink>
<NvLink href="#">tail link</NvLink>
<NvLink href="#">tail link</NvLink>
</NvNav>
</NvSidebar>