1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Team Name

Developer Name

Designer Name

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

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

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.

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.

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.

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

3.5. API

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

ARIA Support The IgxNavbar component has a role of navigation.

RTL Support

Specify all referenced external sources