Skip to content

Components-Bottom navigation (Mobile) / SIde Navigation (tablet or desktop)

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view. Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.

USAGE :

  1. Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app)
  2. Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)
  3. If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.

Bottom navigation and tabs :

when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app.

STYLE :

Icons and text :

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

Style each action according to the following conditions:

  1. When the view is in focus, display that view’s icon and text label.
  2. When there are only three actions, display both icons and text labels at all times .
  3. If there are four or five actions, display inactive views as icons only.

Color :

Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color. If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

Text Labels

Text labels provide short, meaningful definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

BEHAVIOUR :

The bottom navigation bar enables quick movement from deep in one topic to the top of another topic. The bottom navigation bar shouldn’t be used for:

  1. Views focused on a single task, such as an email “Compose” screen
  2. Views containing user preferences or settings.

Bottom navigation icons :

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view. Each icon must lead to a destination, and may not open menus or dialogs.

Scrolling :

The bottom navigation bar can appear and disappear dynamically upon scrolling:

  1. Scrolling downward hides the bottom navigation bar.
  2. Scrolling upward reveals it .

Using swipe gestures on the content area does not navigate between views.

SPECS :

for specs click here.

BOTTOM SHEETS

Bottom sheets slide up from the bottom of the screen to reveal more content.

Modal bottom sheets are primarily for mobile and can also present deep-linked content from other apps.

Persistent bottom sheets integrate with the app to display supporting content.

Interaction :

Bottom sheets are displayed only as a result of a user-initiated action.

Elevation :

Modal bottom sheets: Higher than the app. Persistent bottom sheets: Same elevation as the app.

Alternatives :

Simple Dialogs Menus

Usage :

There are two major types of bottom sheets:

Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile.

Persistent bottom sheets present in-app content.

On larger screens, where space is less constrained, using alternative surfaces and components such as simple dialogs and menus may be more appropriate than bottom sheets.

Persistent Bottom Sheets :

Persistent bottom sheets display in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

Usage :

  1. To introduce new content on a unique surface.
  2. To display content equal in value to the primary content.

Tablet/Desktop :

Persistent bottom sheets are either full width or inset, as determined by the width of the content they contain, overall UI, underlying content, and stylistic choices. On desktop, a persistent bottom sheet may transform into another surface or sheet of material. On desktop, content ordinarily presented in a persistent bottom sheet might move onto a new sheet of material. On larger screens it may be more appropriate to display bottom sheet content on a sheet of material positioned on the left side of the interface.

Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app.They appear above other UI elements and must be dismissed in order to interact with the underlying content.

Usage :

Modal bottom sheets may:

  1. Present actions in a list or grid as an alternative to menus or simple dialogs
  2. Display a contextual menu, when there is no obvious entry point for a menu
  3. Prioritize the visibility of the elements they contain.

Modal bottom sheets can display long menu item names, menu items with subtext, and icons associated with menu items.

Deep linking

Modal bottom sheets may be used to provide deep links to content or controls from another app. These span the full screen width.

Bottom sheets may contain links that perform deep navigation within another app. These links may:

  1. Allow the user to travel multiple levels deep within another app.
  2. Return to the level on which they started.

deep links may not allow the user to navigate upward in the hierarchy: they may only stay at the initial level, go deeper, or travel back to the initial level.

Tablet/Desktop

Consider alternatives to modal bottom sheets on larger screens. Because bottom sheets may appear far from the place where the user clicked or touched to summon them, it splits the user’s attention across two different parts of the screen.

Behaviour

Bottom sheets can be dismissed by swiping the bottom sheet down, by touching an explicit control such as an X in the app bar, or by touching the system back button (Android). Modal bottom sheets can also be dismissed by touching outside of the bottom sheet.

Specs

For specs refer to Click Here.