From fb8ac552d8818f8a2595ff96441293a07753f81b Mon Sep 17 00:00:00 2001 From: Thomas Hutterer Date: Thu, 22 May 2025 16:42:42 +0200 Subject: [PATCH] docs(GlBreadcrumb): Add auto-resize section --- src/components/base/breadcrumb/breadcrumb.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/base/breadcrumb/breadcrumb.md b/src/components/base/breadcrumb/breadcrumb.md index 8a8b8b320e..4f4ac46ae9 100644 --- a/src/components/base/breadcrumb/breadcrumb.md +++ b/src/components/base/breadcrumb/breadcrumb.md @@ -1,5 +1,23 @@ ## Usage +The `GlBreadcrumb` component comes with a smart auto-resize feature. When there is not enough space +to show all breadcrumb `items` in a single row, the component moves items into an ellipsis dropdown, +starting with the first one. The last breadcrumb item (which represents the current page) stays +always visible. + +### Auto-resize + +**Important:** For the auto-resize to function correctly it is necessary that the `GlBreadcrumb` +component itself takes all the horizontal space it can get. Since the component has no way of +knowing in which CSS `display` mode (block, flex, grid) it is used, you have to give it the +corresponding CSS rule yourself. + +**Example:** In a flexbox layout, allow the component to `flex-grow`: + +```js + +``` + ### `items` prop This component also allows for optional avatars on each item. -- GitLab