Remix
Remix
Remix
Users can toggle between alternate views of similar or related content using content switchers. This feature enables the display of only one content section at a time.
Allow users toggle between different formatings, like a grid view and a table view.
To narrow large content groups. (For example, a messaging tool may use a content switcher to divide messages into three views such as “All,” “Read,” and “Unread.”)
The user can take actions, such as adding, removing, or editing content. Use a Button group instead.
There are more than seven options. In this case, use Dropdown instead.
The user performs actions, turns things “on/off” or, makes choices “yes/no”. Use a toggle instead of a content switcher.
When navigating between distinct content areas like subpages, use tabs instead of a content switcher.
Selected content tab: Only one content tab can be selected at a time and there should always be one selected.
Content tab: Selectable container for each content view.
Label: Text label or icon that describes the content view.
Each content tab in the group should be the same width.
Place the content switcher above the content area to create a clear hierarchy for the section that the switcher controls.
Content switches can be used with or without icons. It is highly recommended to be concise and specific and limit text labels to two to three words. Text labels should clearly communicate the view users will see and the content contained in the view.
Use sentence case for a text label.
Keep text labels short — 1 to 3 words.
Text labels should make it clear which view users will see and what content the view contains.
The switcher allows for the display of only one content section at a time, with the first content tab determined by usage and serving as the default selection.
The icon content switcher variant replaces text labels with icons to represent alternate views of similar or related content. This type of switcher is commonly employed when space is at a premium or when icons can effectively convey the meaning of the sections, such as when choosing between a list view and a card view.
The content switcher includes three content tab states: selected, unselected and disabled.
NN/G: Progressive disclosure
NN/G: Accordions Are Not Always the Answer for Complex Content on Desktops
Smashing Magazine: Designing The Perfect Accordion
Viget: Testing Accordion Menu Designs & Iconography