Navigation item
NavigationItem allows users to navigate between distinct applications and website pages.
Use horizontal navigation items within a horizontal group to establish a consistent and easily accessible pathway for users, while conserving valuable screen estate. This will allow users to easily scan and identify navigation options in a seamless user experience.
Use a horizontal group of navigation items when you have fewer than eight items, otherwise consider a vertical group of items.
A new component (VerticalNavigation) has been introduced to replace the existing NavigationItem component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation. For now you can continue to use the NavigationItem component, but we recommend migrating to the new VerticalNavigation component as the NavigationItem component will be deprecated in a future release and removed in the future major release.
A vertical navigation group provides a simple, single-level list of links that users can select within an application or website.
Use vertical navigation when handling a hierarchical structure of nested pages. This configuration allows users to reveal nested items when selecting a parent item, making it easy to explore the content hierarchy.
When the user collapses a vertical nested group, and there is an active nested item within it, the parent item should be configured with blurActive={true}. The indicator will stay on the parent item in the blur-active state. This tells the user that the active item is within this nested structure.
You can use a navigation item as a parent which nests other navigation items inside it. Parent navigation items are displayed with a chevron on the right-hand side. To set a navigation item as a parent, use the parent prop.
If a navigation item has nested items within it, it will act as a trigger to show and hide the nested items. A parent item cannot act as a link and navigate to an overview page. If you require an overview page, use the first nested item to achieve this.
Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.
Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.
You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.
Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.
Use horizontal navigation items within a horizontal group to establish a consistent and easily accessible pathway for users, while conserving valuable screen estate. This will allow users to easily scan and identify navigation options in a seamless user experience.
Use a horizontal group of navigation items when you have fewer than eight items, otherwise consider a vertical group of items.
A new component (VerticalNavigation) has been introduced to replace the existing NavigationItem component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation. For now you can continue to use the NavigationItem component, but we recommend migrating to the new VerticalNavigation component as the NavigationItem component will be deprecated in a future release and removed in the future major release.
A vertical navigation group provides a simple, single-level list of links that users can select within an application or website.
Use vertical navigation when handling a hierarchical structure of nested pages. This configuration allows users to reveal nested items when selecting a parent item, making it easy to explore the content hierarchy.
When the user collapses a vertical nested group, and there is an active nested item within it, the parent item should be configured with blurActive={true}. The indicator will stay on the parent item in the blur-active state. This tells the user that the active item is within this nested structure.
You can use a navigation item as a parent which nests other navigation items inside it. Parent navigation items are displayed with a chevron on the right-hand side. To set a navigation item as a parent, use the parent prop.
If a navigation item has nested items within it, it will act as a trigger to show and hide the nested items. A parent item cannot act as a link and navigate to an overview page. If you require an overview page, use the first nested item to achieve this.
Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.
Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.
You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.
Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.
Use horizontal navigation items within a horizontal group to establish a consistent and easily accessible pathway for users, while conserving valuable screen estate. This will allow users to easily scan and identify navigation options in a seamless user experience.
Use a horizontal group of navigation items when you have fewer than eight items, otherwise consider a vertical group of items.
A new component (VerticalNavigation) has been introduced to replace the existing NavigationItem component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation. For now you can continue to use the NavigationItem component, but we recommend migrating to the new VerticalNavigation component as the NavigationItem component will be deprecated in a future release and removed in the future major release.
A vertical navigation group provides a simple, single-level list of links that users can select within an application or website.
Use vertical navigation when handling a hierarchical structure of nested pages. This configuration allows users to reveal nested items when selecting a parent item, making it easy to explore the content hierarchy.
When the user collapses a vertical nested group, and there is an active nested item within it, the parent item should be configured with blurActive={true}. The indicator will stay on the parent item in the blur-active state. This tells the user that the active item is within this nested structure.
You can use a navigation item as a parent which nests other navigation items inside it. Parent navigation items are displayed with a chevron on the right-hand side. To set a navigation item as a parent, use the parent prop.
If a navigation item has nested items within it, it will act as a trigger to show and hide the nested items. A parent item cannot act as a link and navigate to an overview page. If you require an overview page, use the first nested item to achieve this.
Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.
Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.
You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.
Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.