Navigation Bar Specification

Revision History

Version	User	Date	Notes
2.0	Yoanna Ivanova	June 10, 2020	Extending the specification with new scenarios

Diyan Dimitrov | Date:
Konstantin Dinev | Date:
Radoslav Mirchev | Date:

1. Overview

In the app approach, the navigation bar is used to facilitate parent-child like navigational patterns. On the other side in the responsive web approach, the navigation bar is used to find content and show a wider variety of features. The navigation bar is placed above the content in a header/toolbar.

<igx-navbar [title]="currentView" actionButtonIcon="arrow_back" [isActionButtonVisible]="canGoBack()"
     (onAction)="navigateBack()">
</igx-navbar>

Goals:

Minimal API, focused on providing maximum flexibility for common use cases
App and responsive web approach
Hybrid

2. User Stories

New User Stories

As an end-user, I want to be able to:

see what site I am at
have access to certain actions (e.g. profile, settings, notifications, favorites, help, shopping cart, language)
search in the website/app content
see the main content sections and access their subsections if there is any
see which page I am at
have quick access to the main action (CTA e.g. for a landing page with a marketing purpose: “Start a free trial”)
have a clear division between each zone
have a clear division between the components
have a clear division of the navbar from the rest of the content

Critical User Stories

Back Button: As a user I want to be able to navigate back to my previous page with a back button.

Important User Stories

Title: As a user I want to know the status of the system.
Action Buttons: As a user I want to apply actions on the content of the view.
On Scroll: As a user I want to hide/show the navigation bar as I scroll the main content.
Search: As a user I want to search through my content.

Nice-to-Have User Stories

Gestures: As a user I want to navigate to my previous page with the help of gestures

New Developer Stories

As a developer I want to:

have a horizontal navbar stretched through the whole width of the screen
set fixed/sticky navbar as the main content is scrolled
have a dynamic navbar height as the main content is scrolled
define up to three zones and their positions - left, middle and right zone
have a dynamic layout when I add a zone
have presets and configuration for each of the three zones (avatar, an avatar with a badge, title, action icons, button, button group, drop-down, SVG logo, text, search box)
have flexible layout rules (the components align according to area resize)
visually style the navbar (with divider, background color, elevation)
have an option to set a clear division between the navigation zones (dividing lines, empty space)

Critical developer stories

Define a page: As a citizen developer, I want to define a page element.
Define a hierarchy: As a citizen developer, I want to define a root page.
Back Button: As a citizen developer I want to add a Back Button icon to a navbar. The back button pushes the previous page on the navigational stack and it is left-aligned by default.

Android

Ex.g.

iOS

Back icon and the title of the previous page or just "Back".

Ex.g.

Important developer stories

Title: As a citizen developer I want to add a Title to a Navigational bar.

Android

Next to the Back Button, left Aligned to the bar.

Ex.g.

iOS Centered to the bar.

Ex.g.

Action Icons: As a citizen developer I want to add an unlimited number of icons aligned on the right side of the bar by default.
On Scroll: As a developer I want to hide/show the component as the main content is scrolled.
Search: As a citizen developer, I want to add a search option located in a navigation bar. (more details in Search API)

Android Back button disables Search

Eg.x.

iOS Cancel disables back button, acts as a Back Button

Ex.g.

Search photos image

Custom Action Nav icon: As a citizen developer, I want to be able to define a custom action nav icon instead of using the default one.

Nice-to-have developer stories

Gestures: As a citizen developer, I want to define gestures to navigate back to the previous page.

3. API

IgxNavbarComponent Properties

Name	Type	Description
id	string	An input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
isActionButtonVisible	boolean	Specify whether the `IgxNavbarComponent` default action button should be visible.
actionButtonIcon	string	An input property that sets the default icon of the `IgxNavbarComponent`.
title	string	An input property that sets the title of the `IgxNavbarComponent`.
titleId	string	An input property that sets the titleId of the `IgxNavbarComponent`. If not set it will be automatically generated.

IgxNavbarComponent Events

Name	Description
onAction	The event that will be thrown when the action of the default icon is executed. (Provides a reference to the `IgxNavbar` component as an argument)