Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Sticky-Bar Implementation

The sbb-sticky-bar is a component meant to be slotted inside a sbb-container component.
It is displayed with sticky positioning at the bottom of the container that contains it.

<sbb-container>
  <sbb-sticky-bar>
    <!-- Sticky bar content. -->
  </sbb-sticky-bar>
</sbb-container>

Slots

The sbb-sticky-bar content is provided via an unnamed slot.

Style

The sbb-sticky-bar inherits its variant from the sbb-container it's placed in.
Optionally the user can set the color property on the sbb-sticky-bar in order to override the one inherited by the sbb-container. The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.

Properties

Name Attribute Privacy Type Default Description
color color public 'white' | 'milk' | undefined Color of the container, like transparent, white etc.
disableAnimation disable-animation public boolean false Whether the animation is enabled.

CSS Properties

Name Default Description
--sbb-sticky-bar-padding-block var(--sbb-spacing-responsive-xs) Block padding of the sticky bar.
--sbb-sticky-bar-bottom-overlapping-height 0px Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow.
--sbb-sticky-bar-z-index To specify a custom stack order, the z-index can be overridden by defining this CSS variable.

Slots

Name Description
Use the unnamed slot to add content to the sticky bar.
Examples
Standalone
Short Content
Short Content Milk
Default
Expanded
White
Milk
With Content After
Milk Container
Milk Container White Sticky Bar
HTML-Markup kopiert.
Imprint Contact Cookie settings