Navigation Bar Specification

Jump to bottom

Stefan Ivanov edited this page Aug 2, 2021 · 18 revisions

Navigation Bar Specification

Contents

Overview
User Stories
Functionality
Test Scenarios
Accessibility
Assumptions and Limitations
References

Owned by

Team Name

Developer Name

Designer Name

Requires approval from

Peer Developer Name | Date:
Design Manager Name | Date:

Signed off by

Product Owner Name | Date:
Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Zdravko, Stefan Ivanov, Anastas Staev	2 Aug 2021	Spec updated to latest template

1. Overview

A navigation bar is used to facilitate parent-child-like navigational patterns within an app. A navbar is placed above the content in a header/toolbar.

Objectives

The navbar should provide a templatable, toolbar-looking area at the top of your application screen to serve as an area for high level app navigation. It should provide a minimal API, focused on providing maximum flexibility for common use cases. The navbar should be created in a mobile-first approach but have a hybrid nature that works equally well on desktop and handheld devices.

Acceptance criteria

2. User Stories

Developer stories:

Story 1: As a developer, I want to define a page, so that I can specify where an action on the navbar would take the user to.
Story 2: As a developer, I want to define a hierarchy, so that users always have a root page where they start from.
Story 3: As a developer, I want to have a back button, so that users are automatically taken to the previous view upon clicking on it.
Story 4: As a developer, I want to have a title, so that I can tell my users the page where they are currently at.
Story 5: As a developer, I want to have action icons, so that users can navigate to inner pages and views.
Story 6: As a developer, I want to decide whether the navbar stays or becomes hidden as the user scrolls the page, so that I can show more content in his screen.
Story 7: As a developer, I want to be able to offer search in the navbar, so that I allow users to search for a specific piece of content, rather than navigate to discover it.
Story 8: As a developer, I want to have custom action nav icon, so that I can specify a different interaction than the default one.

End-user stories:

Story 1: As an end-user, I want to have a backbutton, so that I can go to the previews view in case I navigated to the wrong place.
Story 2: As an end-user, I want to have a title, so that I have certainty about the information I am looking at on the current page.
Story 3: As an end-user, I want to have action buttons, so that I can freely navigate to other pages.
Story 4: As an end-user, I want to have search in the navbar, so that I can discover the needed information more easily.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off

3.2. Developer Experience

Defining a navbar for your app should be as simple as:

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

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys	Description

3.5. API

Options

Name	Description	Type	Default value	Valid values
actionButtonIcon	sets the icon of the navbar	string
isActionButtonVisible	Gets/sets the visibility of the action button	boolean
isTitleContentVisible	Gets/sets the visibility of the title	boolean
title	sets the title of the navbar	string

Events

Name	Description	Cancelable	Parameters
action	The event that will be thrown when the action is executed

4. Test Scenarios

Automation

Scenario 1: Should properly initialize properties
Scenario 2: Should change properties' default values
Scenario 3: Should trigger on action event
Scenario 4: Should have default action icon when user has not provided one
Scenario 5: Should have custom action icon/content when user has provided one

5. Accessibility

ARIA Support The IgxNavbar component has a role of navigation.

RTL Support

6. Assumptions and Limitations

Assumptions	Limitation Notes

7. References

Specify all referenced external sources