Skip to content

Navigation Bar Specification

Jump to bottom
Stefan Ivanov edited this page Aug 3, 2021 · 10 revisions

Navigation Bar Specification

Contents

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

Owned by

Team Name: CodeX

Developer Name: Maria Tsvyatkova

Designer Name

Requires approval from

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

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Names of Developers and Designers Date

1. Overview

The <igc-navbar> is used to facilitate navigation through a series of hierarchical screens within an app. It 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 support:

  • Display information about the current position within an app.
  • Provide links to quick actions.

Acceptance criteria

  1. The navigation bar component should have a left-aligned action icon.
  2. The navigation bar component should allow adding quick action icons.
  3. The navigation bar component should have a customizable title.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to add a left-aligned action icon to the navigation bar.
  • Story 2: As a developer, I want to add right-aligned quick action icons to the navigation bar.
  • Story 3: As a developer, I want to specify a title and be able to show custom content as a title.
  • Story 4: As a developer, I want to position the title and the action icons and define their size, so that they better suit the design.
  • Story 5: templatable areas???
  • Story 6: decide to enable hiding on scroll???

End-user stories:

  • Story 1: As an end-user, I want to have a back button so that I am able to navigate back to my previous page.
  • Story 2: As an end-user, I want to have a title so that I know the current status/screen of the app.
  • Story 3: As an end-user, I want to have action buttons so that I can apply actions to the content of the view.
  • Story 4: As an end-user, I want the navigation bar to be hidden when I scroll down the main content so that I can have more space for app content.

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

The <igc-navbar> can be defined like this:

<igc-navbar>
    <button slot="start">Back</button>
    <span>Title</span>
    <button slot="end">Favorites</button>
</igc-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

Slots

Name Description
(default) Renders the title of the navigation bar.
start Renders the left aligned icon.
end Renders the right aligned action icons.

CSS Parts

Name Description
base The base wrapper of the navigation bar.
start The left aligned icon.
middle The title.
end The right aligned action icons.

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Clone this wiki locally