Usage
Vertical navigation layout sets the navigation at the sidebar area. Use the bb-layout--vertical-nav in combination with bb-layout__topbar, bb-layout__skip-to-content, bb-layout__nav-expand-marker, bb-layout__branding-area, bb-layout__horizontal-nav, bb-layout__topbar-content-area, bb-layout__nav-backdrop and bb-layout__main to pProvides a responsive application shell with a vertical navigation bar, branding area, and topbar content for web applications. Navigation menu state can be controlled with LayoutService.
<div
class="bb-layout bb-layout--vertical-nav"
[ngClass]="{
'bb-layout--nav-expanded': layoutService.navigationExpanded$ | async,
'bb-layout--high-resolution-view': layoutService.isHighResolutionView$ | async
}"
>
<div class="bb-layout__topbar" role="banner">
<button aria-label="skip to content" class="bb-layout__skip-to-content">Skip to Content</button>
<button
bbButton
color="dark"
[attr.aria-expanded]="layoutService.navigationExpanded$ | async"
(click)="layoutService.toggleNav()"
class="bb-layout__nav-expand-marker"
aria-label="Toggle sidebar"
>
<span class="bb-icon"></span>
</button>
<div class="bb-layout__branding-area">
<bb-logo-ui type="emblem"></bb-logo-ui>
</div>
<div class="bb-layout__topbar-content-area">
<div>
<bb-icon-ui color="secondary" data-role="notifications-icon" name="notifications" size="lg"></bb-icon-ui>
</div>
</div>
</div>
<div class="bb-layout__nav-backdrop"></div>
<div class="bb-layout__main">
<div class="bb-layout__sidebar">
<button
bbButton
color="dark"
class="bb-layout__sidebar-toggler"
aria-label="Toggle sidebar"
(click)="layoutService.toggleNav()"
>
<span class="bb-icon"></span>
</button>
<nav>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">ACCOUNTS & CARDS</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/accounts"
class="bb-layout__vertical-nav-item-link bb-layout__vertical-nav-item-link--active"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="accounts"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Accounts</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/cards"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment (EU)"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="credit-card"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Cards</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/account-statements"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment (EU)"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="description"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Account Statements</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/transactions"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment (EU)"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="transactions"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Transactions</span>
</a>
</li>
</ul>
</li>
<li class="bb-layout__vertical-nav-separator" role="separator" aria-hidden="true"></li>
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">MOVE MONEY</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/payment-wizard"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create Payment</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/create-eu-payment"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create Payment (EU)</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/international-transfer"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create International Payment</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/create-wire"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create Wire</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/create-ach-credit"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create ACH Credit</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/create-debit"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="add"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Create Debit</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/manage-debits"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="payments"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Manage Debits</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/manage-templates"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="contacts"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Templates</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/payments"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="payments"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Manage Payments</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/batches"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="batches"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Batches</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/stop-checks"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="payments"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Stop Check Payments</span>
</a>
</li>
</ul>
</li>
<li class="bb-layout__vertical-nav-separator" role="separator" aria-hidden="true"></li>
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">FINANCE MANAGEMENT</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/cash-flow"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="currency-trade"></bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Cash Flow</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/sweeping"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="vertical-align-center"></bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Sweeping</span>
</a>
</li>
</ul>
</li>
<li class="bb-layout__vertical-nav-separator" role="separator" aria-hidden="true"></li>
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">TRADING</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/fx-trading"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="monetization-on"></bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Forex</span>
</a>
</li>
</ul>
</li>
<li class="bb-layout__vertical-nav-separator" role="separator" aria-hidden="true"></li>
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">PERSONAL</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/inbox"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="mail"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Inbox</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/contacts"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="contacts"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Contacts</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/my-profile"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="profile"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">My Profile</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/places"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="place"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Places</span>
</a>
</li>
</ul>
</li>
<li class="bb-layout__vertical-nav-separator" role="separator" aria-hidden="true"></li>
<li class="bb-layout__vertical-nav-section">
<div class="bb-layout__vertical-nav-header">
<div class="bb-inline-stack__item">
<h3 class="bb-layout__vertical-nav-header-title" data-role="headings">COMPANY ADMINISTRATION</h3>
</div>
</div>
<ul class="bb-layout__vertical-nav">
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/audit"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="audit"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Audit</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/my-company"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="users"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">My Company</span>
</a>
</li>
<li class="bb-layout__vertical-nav-item">
<a
routerLink="/service-agreements"
routerLinkActive="bb-layout__vertical-nav-item-link--active"
class="bb-layout__vertical-nav-item-link"
aria-label="Create Payment"
tabindex="0"
>
<bb-icon-ui class="bb-layout__vertical-nav-item-icon" name="dns"> </bb-icon-ui>
<span class="bb-layout__vertical-nav-item-title">Service Agreements</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>