diff --git a/_data/components/appLayout.yml b/_data/components/appLayout.yml index 67607726b..927de708c 100644 --- a/_data/components/appLayout.yml +++ b/_data/components/appLayout.yml @@ -97,6 +97,20 @@ attributes: },{ name: "store-state", since: "15.5.0" + }, { + name: "show-ellipsis-menu", + type: "boolean", + default: "no", + required: "", + since: "15.5.4", + description: "Indicates whether or not to show ellipsis in menu items.", + },{ + name: "tooltip-display-mode", + type: "'always'| 'never' | 'only-collapsed'| 'only-expanded'", + default: "only-collapsed", + required: "", + since: "15.5.4", + description: "Defines when the tooltip should be displayed. The default value is **only-collapsed**", } ] diff --git a/assets/images/layouts/app-layout/app-layout-show-ellipsis-menu.png b/assets/images/layouts/app-layout/app-layout-show-ellipsis-menu.png new file mode 100644 index 000000000..d1dea1c8f Binary files /dev/null and b/assets/images/layouts/app-layout/app-layout-show-ellipsis-menu.png differ diff --git a/docs/components/layout/51-o-app-layout.component.md b/docs/components/layout/51-o-app-layout.component.md index f0a541c75..051b0049d 100644 --- a/docs/components/layout/51-o-app-layout.component.md +++ b/docs/components/layout/51-o-app-layout.component.md @@ -166,6 +166,38 @@ export class MainComponent { ![Custom user info]({{ "/assets/images/layouts/app-layout/custom_user_info.png" | absolute_url }}) +## Side Menu Behavior Options +The `` component is the main layout wrapper that provides a consistent structure for applications, including a top toolbar, side navigation menu, and main content area. It supports responsive behavior and is highly customizable. + +Example: + +```html + + + +``` + +### Show ellipsis menu new + +The `show-ellipsis-menu` input controls whether long menu item labels should be visually truncated with an ellipsis (`...`) when they don’t fit in the available horizontal space. By default, this behavior is disabled and text may wrap or overflow depending on layout styles. + +![App layout component with show-ellipsis-menu]({{ "/assets/images/layouts/app-layout/app-layout-show-ellipsis-menu.png" | absolute_url }}) + + +### Tooltip display behavior new + +The `tooltip-display-mode` input lets you control when tooltips should appear on side navigation items. This is especially helpful when the menu is collapsed, and labels are hidden. By default, this value es `only-collapsed` + +Available modes: + +* **`'always'`** – Tooltips are always shown, regardless of the menu state. +* **`'never'`** – Tooltips are never shown. +* **`'only-collapsed'`** – Tooltips are shown only when the side menu is collapsed (default). +* **`'only-expanded'`** – Tooltips are shown only when the side menu is expanded. + +This setting improves accessibility and user experience by offering contextual information only when it's needed. + + ## Images You can set provide images to be shown in the side navigator using the attributes `opened-sidenav-image` and `closed-sidenav-image`. Check this and other attributes in the **API** section of this page.