...
Tabs can be a helpful way of letting users quickly switch between related information if:
Your content can be usefully separated into clearly labelled sections
The first section is more relevant than the others for most users
Users will not need to view all the sections at once
Tabs can work well for users who use a service or application regularly as their need to perform tasks quickly may be greater than their need for simplicity of first-time use
...
Do not use tabs to navigate to different areas
Do not use tabs when content must be presented in sequential order - Use a wizard instead [link when available]
Do not use tabs when content needs to be compared, which would lead to repeated switching between tabs - Use a pattern that allows all content to be presented at once instead
Do not use tabs when content presentation includes only two tabs – Use headings instead [link when available] instead
Best Practices
Do
Tab labels should usually be 1–2 words
Short labels are more scannable; if you need longer labels, it is a sign that the choices are too complicated for a tab control.
Ensure each tab is clearly differentiated from the other tabs
Logically chunk the content behind the tabs so users can easily predict what they will find when they select a given tab
Highlight the currently selected tab
The first tab should be the most commonly needed section - Arrange the other tabs in the order that makes most sense for your users
Make the default active tab first on page load
Include a heading at the beginning of each tab that duplicates the information in the tab label
Don’t
Use multiple rows of tabs
Disable tabs - If there is no content for a tab, either remove the tab or, if that would be confusing for your users, explain why there is no content when the tab is selected
Place the row of tabs on the sides or on the bottom of the panel, as users will often overlook them - Instead place the row of tabs on top of the panel Use multiple rows of tabs them
Tips
Card sorting is a good option for determining how to group information across tabs - If you do not find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content
Test your content without tabs first. Consider if it is better to:
Simplify and reduce the amount of content
Split the content across multiple pages
Keep the content on a single page, separated by headings
Use a table of contents to let users navigate quickly to specific sections of content
Accessibility
The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).
...
Blazor Panel Bar Demos - Templates | Telerik UI for Blazor
...
Examples
Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available.
...
Resources
Government of Canada Resources
...