Navigation Drawer

Use the Navigation Drawer Component to implement application-level navigation by placing it at the left border of the screen with any number of items, allowing browsing between their associated views. It is usually used in combination with a Navbar. The Navigation Drawer is visually identical to the Ignite UI for Angular Navigation Drawer Component

Type

The Navigation Drawer supports a Default type with icon and label for each item and a Mini type with icons only. If your design contains five or less items/views, you may want to consider using a Bottom Navigation instead.

Items

The Navigation Drawer can show up to 21 Items in Sketch and Figma. If you have more items than necessary, you can reduce their number by setting the ones you don't need to ~No Symbol from the overrides panel in Sketch, or by hiding them from the layers panel in Figma. Thanks to the smart layout in Sketch and the auto layout in Figma the rest will adjust automatically. In Adobe XD, you can reduce the number of items by simply deleting the unnecessary ones. Unlike in Sketch and Figma, you can have more than 21 items by duplicating existing ones and even rearranging their order by dragging them around. At the end of any of these manipulations, the layout will be adjusted from the Stack applied to the collection of items.

Item State

Every Navigation Drawer Item comes with a State which can be Active, Inactive or Hover. In Figma, you can go into the nested Navigation Drawer Items and choose the desired state from the State property. In Sketch, this is achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between states. In a Navigation Drawer, only one Item can be Active to indicate the view that will be shown on the rest of the screen.

Styling

The Navigation Drawer provides basic styling capabilities achievable through the options available for the label and icon colors, as well as the active/inactive background colors.

Usage

Navigation Drawer is always used as the main app navigation, therefore, position it from the very top to the very bottom across the whole left edge of the screen and avoid combining it with conflicting app navigation mechanisms such as the Bottom Navigation. Placing a Navigation Drawer on the right edge of the screen is considered inappropriate, as the main navigation should be one of the first things that the user's eyes land on. Having a Navigation Drawer with multiple Active items is also not a valid configuration.

Do	Don't