ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
      • Menubar (Vertical Navigation)
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Navigation Bar

yarn add @clayui/navigation-bar

A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.

  • Examples
  • Markup
  • API

Stable3.3.5View in LexiconCHANGELOGstorybook demos

  • NavigationBar
  • NavigationBar.Item

NavigationBar

PropertyTypeRequiredDefaultDescription
children
Array<React.ReactElement<React.ComponentProps<typeof Item>>>trueChildren elements received from ClayNavigationBar component.
inverted
booleanfalsefalseDetermines the style of the Navigation Bar
spritemap
stringfalsePath to the location of the spritemap resource.
triggerLabel
stringtrueSet up dropdown's trigger label.

NavigationBar.Item

PropertyTypeRequiredDefaultDescription
active
booleanfalsefalseDetermines the active state of an dropdown list item.
children
React.ReactElementtrueChildren elements received from ClayNavigationBar.Item component.

How can this be improved? Create an issue!