navigation/responsive

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Responsive sidebar: narrow viewport when sidebar is index of links

On narrow viewports, when the sidebar is an index of links to detail pages, the sidebar is not visible if the user is navigated to /{parent}/{detail-page}. To see the detail page links, users must go back to /{parent}.

Responsive sidebar one level deep: show back link

If the flow only allows users to go one level deep (for example, /{parent}/{detail-page}), show a link to navigate back to the parent route to see the sidebar as an index page.

Responsive sidebar deeper than detail: use breadcrumbs

If the flow allows the user to go deeper than the detail page (for example, {parent}/{detail-page}/{child-route}), use breadcrumbs to allow users to navigate anywhere in the hierarchy. Breadcrumbs may also be visible on wide viewports, but are not really needed since the user can use the link in the sidebar to go up a level.

Responsive sidebar as filter options: menu on narrow viewports

When a sidebar consists of filter options, on narrow viewports the sidebar is hidden and filter options become items in a menu. Putting the menu options in a menu saves screen real estate without removing them from the page.

Filter menu: action menu vs bottom sheet dialog

Use an action menu for most cases, but use a bottom sheet dialog if there are too many options to comfortably fit in an action menu. There is no hard guideline on the max number of items for an action menu, but 15 can be used as the max if unsure.

Filter menu trigger: new button or repurposed heading

By default, add a new button to the main content area header to open the menu of filter options. Alternatively, use the content area's heading as a trigger to open the menu of filter options when activated. This pattern is useful for keeping the page header clean by repurposing the heading as a control instead of adding another button. When the heading contains a button, it should have styles for interactive states (hover, focus, and pressed) and a trailing dropdown triangle to differentiate it from plain text.

Responsive sidebar with mixed detail links and filters

A sidebar with a mix of detail page links and filter options combines both sidebar patterns. On narrow viewports, the sidebar is hidden, filter options become items in a menu, and detail page links are moved to a parent index view.

Give your agent this brain