-
Notifications
You must be signed in to change notification settings - Fork 4
Navigation Bar Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
CodeX
Maria Tsvyatkova
Stefan Ivanov
- Peer Developer Name | Date:
- Simeon Simeonov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Names of Developers and Designers | Date |
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.
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.
- The navigation bar component should have a left-aligned action icon.
- The navigation bar component should allow adding quick action icons.
- The navigation bar component should have a customizable title.
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: As a developer, I want to have start, middle and end templatable areas, so that the content of the component is fully customizable.
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.
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
| Name | Description |
|---|---|
| (default) | Renders the title of the navigation bar. |
| start | Renders the left aligned icon. |
| end | Renders the right aligned action icons. |
| Name | Description |
|---|---|
| base | The base wrapper of the navigation bar. |
| start | The left aligned icon. |
| middle | The title. |
| end | The right aligned action icons. |
Automation
- Should display content placed between
<igc-navbar>and</igc-navbar>tags. - Should render start, base and end slots correctly.
- Should display elements defined in the slots.
ARIA Support
The navigation bar is fully customizable component which can have different roles (header, banner, toolbar or other) and because of that no ARIA roles, attributes, keyboard shortcuts are set by default.
The developer could specify the role and area-label or area-labelledby attributes to a value that corresponds to the desired behavior and the implementation at hand.
| Assumptions | Limitation Notes |
|---|---|