Skip to main content

Sticky bar

Ensure quick and convenient access to the most frequently used features, even during scrolling.

Sticky bar comes in two variants: one-line and two-line.

View in StorybookExternal link icon

Behavior​

  • The bar should appear as the user scrolls past the bottom edge of the page controls. To implement the transition, use a fade animation with a 100 ms duration.
  • Use components of size S within the bar.
  • Breadcrumbs morph into an action button with a back icon.
  • Switching tabs or items in segment control resets the scroll position.

Usage​

Use to provide context and preserve the essential functionality on longer pages.

Idle state​

Scroll state​

Anatomy​

One-line bar​

  • Width: 100%
  • Height: 56 px
  • Top and bottom paddings: 12 px
  • Right and left paddings: 28 px
  • Content area: 32 px

Two-line bar​

  • Width: 100%
  • Height: 88 px
  • Top and bottom paddings: 12 px
  • Right and left paddings: 28 px
  • Inner margin: 8 px
  • Top content area: 24 px
  • Bottom content area: 32 px

Two-line bar with tabs​

  • Width: 100%
  • Height: 88 px
  • Top padding: 12 px
  • Right and left paddings: 28 px
  • Bottom padding: 0 px
  • Inner margin: 8 px
  • Top content area: 24 px
  • Bottom content area: 36 px

Best practices​

Avoid adding multiple rows of actions​

Do IconDo
Do Example
Don't IconDon't
Don't Example

Align tabs to the bottom edge of the bar​

Do IconDo
Do Example
Don't IconDon't
Don't Example