Skip to content

Navigation Bar Specification

Jump to bottom
Maria Tsvyatkova edited this page Jul 26, 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 the navigation through a series of hierarchical screens within an app. It is placed above the content in a header/toolbar.

<igc-navbar>
    <button slot="start">Back</button>
    <span>Title</span>
    <button slot="end">Favorites</button>
</igc-navbar>

Objectives

  • 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 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 suits the design.

End-user stories:

  • Story 1: As an end-user, I want to navigate back to my previous page using a Back button.
  • Story 2: As an end-user, I want to know the status of the system.
  • Story 3: As an end-user, I want to apply actions on 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.

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

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