Skip to main content

NavigationLayout

<ui5-navigation-layout> | Since 2.4.0

The ui5-navigation-layout is a container component that can be used to create a layout with a header, a side navigation and a content area.

Usage​

Use the ui5-navigation-layout to create whole screen of an application with vertical navigation.

Responsive Behavior​

On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible by default and can be expanded or collapsed using the mode property. On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by default and can be displayed using the mode property.

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";

Basic Sample​

Properties​

mode​

DescriptionSpecifies the navigation layout mode.
Type"Auto" | "Collapsed" | "Expanded" (value descriptions in: NavigationLayoutMode)
Default"Auto"

Slots​

default​

DescriptionDefines the content.
TypeArray<HTMLElement>
DescriptionDefines the header.
TypeArray<HTMLElement>

sideContent​

DescriptionDefines the side content.
TypeArray<SideNavigation>

Events​

No events available for this component.

Methods​

isSideCollapsed​

DescriptionGets whether the side navigation is collapsed.
Return typeboolean

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.