Use accordion for several related show-hide sections on one page. Use tabs for peer panels, side navigation for separate local pages, and filter panel for grouped controls that narrow a result set.
Use accordion for several related show-hide sections on one page. Use tabs for peer panels, side navigation for separate local pages, and filter panel for grouped controls that narrow a result set.
Practice the judgment: Imagine this situation: Accordion labels navigate to pages in some rows and expand content in other rows. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Accordion | Tabs | Side navigation | Filter panel |
|---|---|---|---|---|
| UI or UX | UI + UX - Grouped show-hide sections for related page content | UI + UX - Section-switching component | UI + UX - Persistent local hierarchy at the side of content | UI + UX - Grouped filter control panel for narrowing a current result set |
| UI guidance | Render each section title as a real button inside an appropriate heading, expose expanded or collapsed state, and connect the button to the panel it controls. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. | Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results. |
| UX guidance | Use an accordion when a page has several related sections that users may inspect selectively while still needing an overview of all section labels. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. | Help the person reach a clear task outcome. | Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values. |
| Good UI | A product policy page shows Shipping, Returns, Warranty, and Contact sections as heading buttons with clear expanded states and one open panel. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. | A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results. |
| Bad UI | Collapsed rows look like navigation links, but clicking them only reveals hidden page text. | Tabs wrap unpredictably or look like unrelated buttons. | The side navigation highlights Settings while the page heading is Audit log. | A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading. |
| Good UX | A user opens Returns, then Warranty, scans both sections, collapses Returns, and the page keeps focus and open-state feedback stable. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. | A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable. |
| Bad UX | A user misses eligibility requirements because the only required step is hidden inside a collapsed section by default. | Using tabs as primary navigation to unrelated pages. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Applying a filter silently resets the query, sort order, current page, and view density. |
| Best fit | Section headings provide a useful overview and users can choose which details to inspect. | Users switch between sibling panels frequently. | A product area has several related pages arranged in a visible hierarchy. | Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria. |
| Avoid when | There is only one revealable section and a simpler details disclosure is enough. | The destinations are unrelated pages. | The destinations are top-level product areas that belong in global navigation. | The result set is small enough that scanning is faster than filtering. |
| Required state | All collapsed state with every section title visible. | Default active tab and visible panel. | Default state with the local section hierarchy visible beside content. | Applied state with active-filter count, result count, and removable applied criteria near the results. |
| Accessibility burden | Use native buttons for section controls and expose expanded or collapsed state. | Expose the active tab and associated panel. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. | Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values. |
| Common misuse | Hiding content users must read sequentially before completing a task. | Using tabs as a primary site navigation system. | Duplicating global navigation links in the side navigation. | Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set. |