Tabs
Overview
Use the tabs feature to condense sections of text that have a similar purpose. For example, a set of instructions for students, faculty, and staff.
Because interactive elements, such as tabs, increase the cognitive load for your user, they are problematic when used inappropriately. Use another method to display content if any of these are true:
- The information you are displaying is important or time sensitive (event, service hours, urgent information)
- You have more than four sections to promote
- You expect people to be directed to your page from other sources (linked content, printed URLs, search engines) to locate information that would be hidden if nested in a tab
- The tab titles are more than 30 characters long (per tab)
- You are using the feature to achieve an aesthetic preference rather than to serve a functional need
Alternative options include creating a longer page or splitting content into multiple pages. Longer pages are not problematic when they are well organized. It's not necessary to try to condense as much information as possible into a single screen.
Usage guidelines
- Keep usage of this feature to a minimum. Tabs can be difficult to use on mobile devices and may make content more difficult to find.
- To ensure tabs will be readable on smaller screens, use no more than three to four tabs per section, and keep tab titles to 30 characters or less.
- Keep content within tabs to a minimum. Generally, display no more than two to three paragraphs per expandable section.
Documentation
Massa enim nec dui nunc mattis enim ut. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Leo urna molestie at elementum. Mattis nunc sed blandit libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus a pellentesque sit amet porttitor eget dolor. Ac turpis egestas sed tempus. Hendrerit dolor magna eget est lorem ipsum dolor. Faucibus pulvinar elementum integer enim. Nunc scelerisque viverra mauris in aliquam sem. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
Scelerisque fermentum dui faucibus in ornare quam viverra orci. Volutpat odio facilisis mauris sit amet massa vitae. Non sodales neque sodales ut etiam. Bibendum neque egestas congue quisque egestas diam. Pretium vulputate sapien nec sagittis. Tellus in metus vulputate eu scelerisque felis imperdiet. Pretium quam vulputate dignissim suspendisse in est ante in nibh.
Tellus elementum sagittis vitae et leo duis ut diam. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Eget gravida cum sociis natoque penatibus. Ultricies integer quis auctor elit sed. Leo a diam sollicitudin tempor id eu nisl nunc. Malesuada proin libero nunc consequat interdum varius sit amet mattis.