new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

GitHub Primer · all subjects

tab-nav

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

Tab nav component purpose

Tab nav contains a set of links that let users navigate between different views in the same context. Each tab links to a different view that is shown when a user selects a tab. Tab nav is always a set of links, and each tab should have a unique URL.

When to use tab nav versus tab panels

Use tab nav when you want tabs that navigate between different views with unique URLs. If you want tabs that toggle between different views without changing the URL, use tab panels instead.

Default tab selection best practice

One of the tabs should be selected by default when the user loads the page.

Tab label length best practice

Keep tab labels as short as possible, ideally no more than three words.

Limit number of tabs

Avoid overwhelming the user with too many tabs. Instead consider a navigation structure like a nav list that is meant to handle more links.

Form data handling when switching tabs

If a user navigates to a different tab panel, form data should not be automatically saved or submitted. Changes must be explicitly saved or submitted.

Do not nest tab navs

Avoid nesting a tab nav within another tab nav view's content.

Don't require multiple tabs for information comparison

Do not force users to switch between multiple tabs to compare information. Each tab panel should have all of the information a user needs to complete their task.

Tab nav cannot contain nested buttons or links

Do not nest buttons or links in the tab title. The tab is already a link or button, so it cannot have a child element that is also a link or button.

Related content after tabs placement

Content or an action may be shown after the tabs as long as it is something that is relevant to the content in all of the tab panels. The related content's element(s) should be a sibling of the element that wraps the tabs, not a child.

Counter labels in tabs

A counter label may be used to show a count after the text label if the tab contains enumerable content that would be helpful for users to know without activating the tab.

Icons in tabs

An icon may be shown before the tab's text label to help users understand the purpose of the tab.

Give your agent this brain