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
    • Aspect Ratio
    • 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
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • 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
  • Docs
  • Sass API
  • 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.69.0View in LexiconCHANGELOGstorybook demos

  • NavigationBar
  • NavigationBar.Item

NavigationBar

PropertyTypeRequiredDefaultDescription
children
| Array<React.ReactElement<React.ComponentProps<typeof Item>>> | 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!