BTP/Navigation/Vertical Navigation

The navigation is one of the signature design elements of BTP Tools.

### Recommended - Use the navigation to switch between different pages of your tool. - Use expanded vertical navigation for unknown users. - Use persistence and display the last state the vertical navigation was in for know users. - Use the snapped variant when the content area displays multi-column content relationships. - Use the popup variant to display between 3 and 7 navigation items without hierarchy. - Use the horizontal navigation variant to display more than two levels of hierarchy. - Use nouns for the titles of navigation items. ### Not Recommended - Avoid using the navigation for switching between tools. Use the mega menu instead. - Avoid using the navigation to switch contexts or views. Use tabs or segmented buttons instead. - Avoid using verbs for the titles of navigation items. Use nouns instead. - Avoid using the Navigation Items for both navigation and groups. Use only one of the options. - Avoid having more than three levels of hierarchy in the horizontal variant. - Avoid using icons in secondary navigation and navigation groups. - Avoid using spacers to separate navigation content. Use separators instead. - Avoid using dividers to separate groups. Use separators instead. - Avoid using the bottom navigation area for service information. Use settings and user menu instead.

Vertical navigation is the most common and preferred way of navigating BTP tools. It comprises many elements that work together to provide a logical information hierarchy and inform users of their current position.

By default, the Parent Navigation Item functions as a Navigation Group. A small arrow icon shows the item's expanded/collapsed state in this scenario. In the snapped variant, clicking on such a navigation item will open a popover that displays the title and Child Items.Although not recommended, the Navigation Item can function for navigation and expansion/collapse. In this case, clicking on the arrow will show/hide Child Items, and clicking on the item will perform the navigation.

The snapped vertical navigation variant reduces the navigation width to free horizontal space.

An alternative to the expanded/snapped variant, which places the navigation items in a popup.

Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated") using the Object Status component. **Guidelines:** - One tag per navigation item (parent or child items only) - Avoid semantic colors 1-4 (may be confused with error/success/warning states) - Limit tag width to 64px (4rem) — use abbreviations if needed (e.g., "Experimental" → "Exp") - Tags are visual indicators only (non-interactive, no tooltips or actions)

Fixed header area that is separated by a separator similar to the footer area. Top-aligned and fixed/sticky (always visible). Contains the optional search field. Add .fd-navigation__container--sticky together with .fd-navigation__container--top modifier class to the .fd-navigation__container base class to make the top area sticky. Guideline: Recommended not to contain more than 4 items.

Search Only: for a sticky search field, the sticky header area with separator is not needed. The search field can be sticky by applying .fd-navigation__list-item--sticky modifier class to the parent navigation list item. Note: The .fd-navigation__list-item--home class is still supported for backward compatibility and functions identically to .fd-navigation__list-item--sticky. It was originally intended specifically for Home navigation link, but .fd-navigation__list-item--sticky is now the recommended approach as it can be applied to any list item that needs to be sticky at the top.