Introduction

ABMNavigationBar is not a real stand-alone component, but a property of an ABMPage. This is why it is placed under Helpers.

How does it work

Building a Naviagion Bar with an optional Side Bar is really easy in ABMaterial. It is important to know that for every page that uses the Navigation Bar, you must create the complete bar, just changing the active items. The sidebar can have only one sublevel in the tree.

Let's start with checking out the code we used for this WebApp and I'll explain afterwards.

Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String) 
	page.NavigationBar.Initialize(page, "nav1", Title, ABM.TEXTALIGN_LEFT, False, True, False,True, 300, 48, logo, ABM.COLLAPSE_ACCORDION, "nav1theme")
	page.NavigationBar.ActiveTopReturnName = ActiveTopReturnName
	page.NavigationBar.ActiveSideReturnName = ActiveSideReturnName
	page.NavigationBar.ActiveSideSubReturnName = ActiveSideSubReturnName
			
	// this is a special one: a full screen toggle icon.  Will be handled automatically
	// this is experimental, as it has side effects e.g. when you navigate to another page, it is switched of again
	// nb.AddTopFullScreenIcon
	
	page.NavigationBar.AddTopItem("Contact", "", "mdi-action-account-circle", "")
		
	page.NavigationBar.AddSideBarItem("About", "About", "mdi-action-dashboard", "../AboutPage")
	page.NavigationBar.AddSideBarItem("GettingStarted", "Getting started", "mdi-editor-insert-comment", "../GettingStartedPage")
	page.NavigationBar.AddSideBarItem("Themes", "Themes", "mdi-action-invert-colors", "../ThemesPage")
	page.NavigationBar.AddSideBarItem("Layouts", "Grids", "mdi-editor-border-all", "../GridsPage")	
	page.NavigationBar.AddSideBarDivider("")
	page.NavigationBar.AddSideBarItem("Controls", "Controls", "mdi-image-palette", "")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMActionButton", "ABMActionButton", "", "../CompActionButtonPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMBadge", "ABMBadge", "", "../CompBadgePage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMButton", "ABMButton", "", "../CompButtonPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMCanvas", "ABMCanvas", "", "../CompCanvasPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMCard", "ABMCard", "", "../CompCardPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMCheckbox", "ABMCheckbox", "", "../CompCheckboxPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMCombo", "ABMCombo", "", "../CompComboPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMChip", "ABMChip", "", "../CompChipPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMCodeLabel", "ABMCodeLabel", "", "../CompCodeLabelPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMDivider", "ABMDivider", "", "../CompDividerPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMGoogleMap", "ABMGoogleMap", "", "../CompGoogleMapPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMLabel", "ABMLabel", "", "../CompLabelPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMList", "ABMList", "", "../CompListPage")	
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMImage", "ABMImage", "", "../CompImagePage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMInputfield", "ABMInputfield", "", "../CompInputPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMRadioGroup", "ABMRadioGroup", "", "../CompRadioGroupPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMSignaturePad", "ABMSignaturePad", "", "../CompSignaturePage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMImageSlider", "ABMImageSlider", "", "../CompSliderPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMSwitch", "ABMSwitch", "", "../CompSwitchPage")	
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMTabs", "ABMTabs", "", "../CompTabsPage")	
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMUpload", "ABMUpload", "", "../CompUploadPage")
	page.NavigationBar.AddSideBarSubItem("Controls", "ABMVideo", "ABMVideo", "", "../CompVideoPage")
	page.NavigationBar.AddSideBarDivider("")	
	page.NavigationBar.AddSideBarItem("Helpers", "Helpers", "mdi-device-now-widgets", "")
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMContainer", "ABMContainer", "", "../HelperContainerPage")
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMModalSheet", "ABMModalSheet", "", "../HelperModalSheetPage")
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMNavigationBar", "ABMNavigationBar", "", "../HelperNavigationBarPage")	
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMPage", "ABMPage", "", "../HelperPagePage")
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMParallax", "ABMParallax", "", "../HelperParallaxPage")
	page.NavigationBar.AddSideBarSubItem("Helpers", "ABMTable", "ABMTable", "", "../HelperTablePage")	
	page.NavigationBar.AddSideBarDivider("")
	page.NavigationBar.AddSideBarItem("Icons", "Icons", "mdi-action-account-circle", "../IconsPage")	
End Sub

We also take the code from the BuildPage() method of this page 'HelperNaviagationBarPage' with us.

ABMShared.BuildNavigationBar(page, "ABMNavigationBar", "../images/logo.png", "", "Helpers", "ABMNavigationBar")

If we go over the parameters we filled in in the BuildNavigationBar() method, we'll notice we gave it a Title (the text on top), a logo (the picture on the top of the Side Bar saying ABMaterial) and three extra parameters:

Param Description
ActiveTopReturnName If you have multiple TopItems, you set this parameter to be the active one. In this demo, we have only one item, so we can leave it empty.
ActiveSideReturnName This sets the active item from the side bar. In our example it is 'Helpers'.
ActiveSideSubReturnName This sets the active sub item from the side bar. In our example it is 'ABMNavigationBar'.

We can find those values back in the BuildNavigationBar() method, being params (1) and (2). Param (3) is here the same, but this is the title of the item. Param(4) is an optional icon name and param(5) is de page we want to jump to when the user clicks on the item. Note the '../' before as we have to respect the folder tree. (it is one folder down, then the page name in this case. Check the folder structure in Explorer if you are in doubt.

page.NavigationBar.AddSideBarSubItem("Helpers", "ABMNavigationBar", "ABMNavigationBar", "", "../HelperNavigationBarPage")
Initialization

There are some options you can set to the Naviagation Bar during Initialization:

Param Description
page The page object in you class. Is only to be conform with all other controls and may be usefull in the future.
id The ID of the control.
title The title on the top bar.
alignTitle Alignment of the title text. Can be one of the constants ABM.TEXTALIGN_LEFT, ABM.TEXTALIGN_CENTER or ABM.TEXTALIGN_RIGHT.
alignTopItemsLeftIfTitleCentered If the Title is centered, do you want the items to be on the left of it. On the right by default.
topBarDropDownBelow If the topbar has sub items, does the dropdown list be under the bar, or over it.
hideTopBarItemsOnSmallAndMedium Hide all the topbar items if on a small screen.
topBarFixed If fixed, the top bar stays on top of the window when scrolling the body. If false, then the top bar will float with the scrolling. In this Web App, all top bars are fixed.
sideBarWidthPx Width of the side bar.
sideBarItemHeightPx Height of a sidebar item.
sideBarLogo Logo on the top left of the side bar.
sideBarCollapseType Can be either the constant ABM.COLLAPSE_ACCORDION or ABM.COLLAPSE_EXPANDABLE.
themeName The name of the theme you want to use.

The Navigation bar has one event NavigationbarClicked(), raised on the page object. Use this event to load another page for example.

Sub Page_NavigationbarClicked(Action As String, Value As String)
	page.SaveNavigationBarPosition	
	If Action = "ABMNavigationBar" Then Return
	If Action = "Contact" Then	
		myToastId = myToastId + 1	
		page.ShowToast("toast" & myToastId, "toastred", "Hello to you too!", 5000)
		Return
	End If
	ABMShared.NavigateToPage(ws, Value)
End Sub