Usage
Horizontal navigation layout sets the navigation at the topbar area for large screens and to the left for mobile screens. Use the bb-layout--horizontal-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 provide responsive application shell with a horizontal navigation bar, branding area, and topbar content for web applications. Navigation menu state can be controlled with LayoutService.
<div
class="bb-layout bb-layout--horizontal-nav"
[ngClass]="{
'bb-layout--nav-expanded': layoutService.navigationExpanded$ | async,
'bb-layout--high-resolution-view': layoutService.isHighResolutionView$ | async
}"
>
<!-- Topbar Area -->
<nav class="bb-layout__topbar bb-layout__topbar--sm">
<!-- Skip to content -->
<button
i18n-aria-label="
Move focus to beginning of content|Value for aria-label saying that this button will move the focus to the
beginning of the content
"
aria-label="skip to content"
class="bb-layout__skip-to-content"
i18n="Skip to content|Text to enforce the user to click to put focus on the main content section"
>
Skip to Content
</button>
<!-- Hamburger -->
<button
class="bb-layout__nav-expand-marker"
aria-label="Toggle sidebar"
i18n-aria-label="Sidebar Toggler|Button for toggling sidebar state@@bb-layout.sidebar_toggler"
[attr.aria-expanded]="layoutService.navigationExpanded$ | async"
(click)="layoutService.toggleNav()"
>
<span class="bb-icon"></span>
</button>
<!-- Logo -->
<div class="bb-layout__branding-area">
<bb-logo-ui type="emblem" class="mx-4"></bb-logo-ui>
</div>
<!-- Navigation Items-->
<ul class="bb-layout__horizontal-nav">
<li class="bb-layout__horizontal-nav-item">
<a
class="bb-layout__horizontal-nav-link"
tabindex="0"
routerLink="/my-accounts"
routerLinkActive="bb-layout__horizontal-nav-link--active"
>
<span class="bb-layout__horizontal-nav-item-description"> My accounts </span>
</a>
</li>
<!-- Transfers -->
<li
class="bb-layout__horizontal-nav-item"
ngbDropdown
display="static"
#transfersDropdown="ngbDropdown"
bbLayoutNavDropdown
#transfersNavDropdown="bbLayoutNavDropdown"
>
<a
ngbDropdownToggle
class="bb-layout__horizontal-nav-link"
href="javascript:;"
[ngClass]="{
'bb-layout__horizontal-nav-link--expanded': transfersDropdown.isOpen() || transfersNavDropdown.isActive
}"
[attr.aria-expanded]="transfersDropdown.isOpen()"
id="bb-menu-header-button-1"
tabindex="0"
role="button"
>
<span class="bb-layout__horizontal-nav-item-description">Transfers</span>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--vertical"
[name]="transfersDropdown.isOpen() ? 'toggle-up' : 'toggle-down'"
></bb-icon-ui>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--horizontal"
name="chevron-right"
></bb-icon-ui>
</a>
<div
ngbDropdownMenu
class="bb-layout__horizontal-nav-submenu"
role="region"
tabindex="-1"
aria-labelledby="bb-menu-header-button-1"
>
<button class="bb-layout__horizontal-nav-submenu-header" (click)="transfersDropdown.close()">
<bb-icon-ui class="bb-layout__horizontal-nav-submenu--close" name="angle-left" size="lg"></bb-icon-ui>
<div class="bb-layout__horizontal-nav-submenu--text">Main Menu</div>
</button>
<ul class="bb-layout__horizontal-nav-column">
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/2/make-a-transfer"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Make a transfer</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/2/money-to-member"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Send money to member</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/2/scheduled-transfers"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Scheduled transfers</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/2/3"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Connected accounts</div>
</div>
</a>
</li>
</ul>
</div>
</li>
<!-- Bill pay -->
<li
class="bb-layout__horizontal-nav-item"
ngbDropdown
display="static"
#billPayDropdown="ngbDropdown"
bbLayoutNavDropdown
#billPayDropdownState="bbLayoutNavDropdown"
>
<a
ngbDropdownToggle
class="bb-layout__horizontal-nav-link"
href="javascript:;"
tabindex="0"
[ngClass]="{
'bb-layout__horizontal-nav-link--expanded': billPayDropdown.isOpen() || billPayDropdownState.isActive
}"
[attr.aria-expanded]="billPayDropdown.isOpen()"
id="bb-menu-header-button-2"
role="button"
>
<span class="bb-layout__horizontal-nav-item-description">Bill pay</span>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--vertical"
[name]="billPayDropdown.isOpen() ? 'toggle-up' : 'toggle-down'"
></bb-icon-ui>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--horizontal"
name="chevron-right"
></bb-icon-ui>
</a>
<div
ngbDropdownMenu
class="bb-layout__horizontal-nav-submenu"
role="region"
tabindex="-1"
aria-labelledby="bb-menu-header-button-2"
>
<button class="bb-layout__horizontal-nav-submenu-header" (click)="billPayDropdown.close()">
<bb-icon-ui class="bb-layout__horizontal-nav-submenu--close" name="angle-left" size="lg"></bb-icon-ui>
<div class="bb-layout__horizontal-nav-submenu--text">Main Menu</div>
</button>
<ul class="bb-layout__horizontal-nav-column">
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/billpay/pay-bill"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Pay a bill</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/billpay/pending-bills"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Pending payments</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/billpay/history-bills"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">History payments</div>
</div>
</a>
</li>
</ul>
</div>
</li>
<!-- Analytics -->
<li
class="bb-layout__horizontal-nav-item"
ngbDropdown
display="static"
#analyticsDropdown="ngbDropdown"
bbLayoutNavDropdown
#analyticsDropdownState="bbLayoutNavDropdown"
>
<a
ngbDropdownToggle
class="bb-layout__horizontal-nav-link"
href="javascript:;"
tabindex="0"
[ngClass]="{
'bb-layout__horizontal-nav-link--expanded': analyticsDropdown.isOpen() || analyticsDropdownState.isActive
}"
[attr.aria-expanded]="analyticsDropdown.isOpen()"
id="bb-menu-header-button-3"
role="button"
>
<span class="bb-layout__horizontal-nav-item-description">Analytics</span>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--vertical"
[name]="analyticsDropdown.isOpen() ? 'toggle-up' : 'toggle-down'"
></bb-icon-ui>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--horizontal"
name="chevron-right"
></bb-icon-ui>
</a>
<div
ngbDropdownMenu
class="bb-layout__horizontal-nav-submenu"
role="region"
tabindex="-1"
aria-labelledby="bb-menu-header-button-3"
>
<button class="bb-layout__horizontal-nav-submenu-header" (click)="analyticsDropdown.close()">
<bb-icon-ui class="bb-layout__horizontal-nav-submenu--close" name="angle-left" size="lg"></bb-icon-ui>
<div class="bb-layout__horizontal-nav-submenu--text">Main Menu</div>
</button>
<ul class="bb-layout__horizontal-nav-column">
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/insights/cashflow"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Cash flow</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/insights/spending-analysis"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Spending analysis</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/insights/income-analysis"
>
<div class="bb-layout__bb-horizontal-nav-submenu-item-label">
<div class="bb-layout__bb-horizontal-nav-submenu-title">Income analysis</div>
</div>
</a>
</li>
</ul>
</div>
</li>
<!-- More -->
<li
class="bb-layout__horizontal-nav-item bb-layout__horizontal-nav-item--secondary"
ngbDropdown
display="static"
#moreDropdown="ngbDropdown"
bbLayoutNavDropdown
#moreDropdownState="bbLayoutNavDropdown"
>
<a
ngbDropdownToggle
class="bb-layout__horizontal-nav-link"
href="javascript:;"
tabindex="0"
[ngClass]="{
'bb-layout__horizontal-nav-link--expanded': moreDropdown.isOpen() || moreDropdownState.isActive
}"
[attr.aria-expanded]="moreDropdown.isOpen()"
id="bb-menu-header-button-5"
role="button"
>
<bb-icon-ui class="bb-layout__horizontal-nav-item-icon" name="ellipsis-h"></bb-icon-ui>
<span class="bb-layout__horizontal-nav-item-description">More</span>
<bb-icon-ui
class="bb-layout__horizontal-nav-expand-marker bb-layout__horizontal-nav-expand-marker--horizontal"
name="chevron-right"
></bb-icon-ui>
</a>
<div
ngbDropdownMenu
class="bb-layout__horizontal-nav-submenu"
role="region"
tabindex="-1"
aria-labelledby="bb-menu-header-button-5"
>
<button class="bb-layout__horizontal-nav-submenu-header" (click)="moreDropdown.close()">
<bb-icon-ui class="bb-layout__horizontal-nav-submenu--close" name="angle-left" size="lg"></bb-icon-ui>
<div class="bb-layout__horizontal-nav-submenu--text">Main Menu</div>
</button>
<ul class="bb-layout__horizontal-nav-column">
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/6/budgets"
>
<div class="bb-layout__horizontal-nav-submenu-item-label">
<div class="bb-layout__horizontal-nav-submenu-title">Budgets</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/6/messages"
>
<div class="bb-layout__horizontal-nav-submenu-item-label">
<div class="bb-layout__horizontal-nav-submenu-title">Messages</div>
</div>
</a>
</li>
<li>
<a
class="bb-layout__horizontal-nav-submenu-link"
ngbDropdownItem
routerLinkActive="bb-layout__horizontal-nav-submenu-link--active"
routerLink="/6/find-us"
>
<div class="bb-layout__horizontal-nav-submenu-item-label">
<div class="bb-layout__horizontal-nav-submenu-title">Find branches and ATMs</div>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
<!-- Topbar Content Area (a.k.a. Right Topbar Area) -->
<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>
</nav>
<!-- Backdrop-->
<div class="bb-layout__nav-backdrop" (click)="layoutService.toggleNav()"></div>
</div>