Navigation Drawer Specification - IgniteUI/igniteui-webcomponents GitHub Wiki
Overview
The <igc-nav-drawer> is a container element for side navigation that provides quick access between views. It is suitable for deep navigation apps, or such with top-level views. It can either be permanently on-screen or controlled by a navigation menu icon.
Objectives
It provides API for the most common use cases when it comes to performing app navigation and access to views.
User Stories
Developer
- As a developer, I want to be able to open/close the navigation drawer whether it is unpinned or persistent. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. Unpinned drawer can be closed by tapping or clicking outside of it.
- As developer, I want to have an option to change the side of navigation. I can choose between start, end, top and bottom placement.
- As developer, I want to be able to choose the width of the drawer.
- As a developer, I want to be able to switch between pinned and unpinned modes. The default mode is unpinned, where the navigation drawer displays above the content with a darkened overlay over it. By pinning it, the navigation drawer is displayed on the same flow as the content and becomes permanent or persistent.
- As developer, I want to have an option for a using a mini-drawer. It shows icons at the same elevation as the content. When expanded, it becomes a standard persistent navigation drawer.
End user
- As a user, I want to have a navigation drawer that provides quick access to different parts of the app.
- As a user, I want to be able to toggle open/close the temporary navigation drawer by tapping/clicking on an icon.
- As a user, I want to have a navigation drawer that is persistent (pinned) on the screen when I am using devices with bigger display.
- As a user, I want to have an option to use a persistent (pinned) drawer that gets opened by a menu icon and stays open until I close it.
- As a user, I want to have an option for using a mini-drawer. It’s default state a mini drawer, showing icons at the same elevation as the content. When expanded it appears as a standard persistent navigation drawer.
Acceptance criteria
- The navigation drawer should have buttons/icons to handle visibility.
- The navigation drawer should handle user interactions and events.
- The navigation drawer should handle position.
Functionality
Properties
| Name |
Type |
Description |
Default value |
open |
State of the drawer. |
boolean |
false |
position |
Sets the position of the drawer. |
start, end, top, bottom |
start |
pinned |
Pinned state of the drawer. |
boolean |
false |
Methods
| Name |
Description |
| show |
Opens the navigation drawer. Has no effect if already opened. |
| hide |
Closes the navigation drawer. Has no effect if already closed. |
| toggle |
Toggles the open state of the navigation drawer |
Events
| Name |
Description |
| igcOpening |
Fired when the drawer is about to open. |
| igcOpened |
Fired when the drawer is opened. |
| igcClosing |
Fired when the drawer is about to close. |
| igcClosed |
Fired when the drawer is closed. |
Slots
| Name |
Description |
| (default) |
The default slot for the drawer. |
| mini |
The slot for the mini variant of the drawer |
CSS Parts
| Name |
Description |
| base |
The base wrapper of the navigation drawer. |
| main |
The main container. |
| mini |
The mini container. |
Test Scenarios
Automation
- Should render
<igc-nav-drawer> with <igc-nav-drawer-item> elements inside
- Should render
<igc-nav-drawer> with <igc-nav-drawer-item> and <igc-nav-drawer-header-item> elements inside
- Should render the content and mini drawer in the correct slots
- Should successfully change
<igc-nav-drawer> position
- Should successfully toggle
<igc-nav-drawer>
- Should successfully pin
<igc-nav-drawer>
- Should successfully set
<igc-nav-drawer-item> to active
- Should successfully set
<igc-nav-drawer-item> to disabled
- Should emit
igcOpening, igcOpened, igcClosing, igcClosed events