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 desktop and tablet devices, the side navigation is visible by default and can be expanded or collapsed using the mode property. On phone devices, 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"
Default"Auto"

Slots​

DescriptionDefines the header.
TypeArray<HTMLElement>

sideContent​

DescriptionDefines the side content.
TypeArray<SideNavigation>

default​

DescriptionDefines the content.
TypeArray<HTMLElement>

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.