Sidebar UI
Jovin LiewWhat is a sidebar component?
A sidebar makes it easy for users to navigate an app's features or sections. It may also include extra content or actions to help with tasks.
A common interaction is tapping the hamburger menu icon, which makes a sidebar slide in from the left or right.
When used properly, sidebars help to reduce cognitive load by hiding non-core features like profile, settings, and help screens.
It is commonly seen in design patterns like: Navigation & User Profile.
Examples of what sidebars look like in mobile apps.| When to use sidebar UI? | ||
|---|---|---|
| Complex navigation needs | Complex apps with many sections and features | |
| Infrequently visited screens | Non-core features like Settings, Profile, Help screens | |
| When not to use sidebar UI? | ||
|---|---|---|
| Simple navigation needs | Simple apps that does not need to much navigation | |
| Frequently visited screens | For primary app destinations, put it in the tab bar instead. Hiding it in the sidebar might make it less accessible. | |
What is the anatomy of a sidebar component?
Anatomy of a toast.What are the design variants of a sidebar?
We studied over 1,700+ sidebar UI components on Mobbin, from real-world examples and found the following variants.
1. Drawer style side bars
Here are some drawer styled sidebars that can slide in from either the left or right side.
For the first example, this is a navigation-based drawer style side bar that allows users to navigate across many different pages on the mobile UI. A sidebar UI design is good for more complicated apps that have many pages as it helps hide cognitive load from the main UI.
For the second example, notice that these drawers are sliding in from the right side of the app. These are commonly non-navigation based sidebar UI. Used mostly for filtering & sorting actions, or for displaying more information and functionality contextual to a specific page or action.
Examples of sidebars sliding in from the left
Examples of sidebars sliding in from the right.2. User profiles in sidebar
In some cases, we observe user profiles being featured prominently at the top of the sidebar. This is used commonly in apps with a social element.
Sidebars with user profiles3. Navigation rail
A less common variation of the sidebar is a navigation rail. In this case, the sidebar is exposed by default, and does not require the user to click on a hamburger menu icon to open it. This might result in more cognitive load, and should only be used if quick navigation is essential to the user experience.
Navigation rail sidebarsWhen to use a sidebar?
1. Navigation
Sidebars are often used as the primary navigation system in apps that have too many sections to feature them all on the Tab Bar.
They typically contain a list of menu items or icons representing different sections or pages within the app. Users can tap on these items to quickly switch between different views or access specific functionality.
Sidebars being used as navigation for larger apps with more surface area.2. User profile
Sidebars are commonly used to provide access to user profiles or account-related features.
Users can view and edit their profile information, manage settings, and perform actions related to their accounts.
Sidebars are commonly used for user profile.