Navigations / Tabs

Main Navigation Bar

This is a custom navigation bar with multiple buttons, on click of each button navigate to its respective route url. Each button can be active, disbaled and have sub menus.

Sub Navigation Bar

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

Progress indicator

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

Accordion

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read. Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

Segmented Control

Use segmented control to group pattern within a tab to avoid nesting of tabs. These are often used to display different views.

Tab 1 content Tab 2 content Tab 3 content