Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Toolbar

yarn add @clayui/toolbar

A toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.

  • Examples
  • Markup
  • API

Stable3.89.0View in LexiconCHANGELOGstorybook demos

  • Introduction
  • Composing

Introduction

A toolbar organizes actions into a horizontal bar that is responsive. Its height changes to accommodate the height of the elements it contains. The toolbar always maintains the vertical alignment.

Copied!
Code Sample (expand to see it)

Composing

ClayToolbar.Nav is the highest level wrapper to be used inside the Toolbar to wrap all the content inside.

ClayToolbar.Item represents a Toolbar child item, a list item that is supposed to wrap around any of the other low-level components.

ClayToolbar.Section is a wrapper to be used inside the ClayToolbar.Item that makes the contents it wraps display inline.

ClayToolbar.Action is used when you want a clickable icon to add an action in the Toolbar.

ClayToolbar.Input, ClayToolbar.Label and ClayToolbar.Link are essentially a wrapper around their respective Clay components with some specifics related to Toolbar.

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!