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
    • 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

As described on Lexicon, a NavigationBar can be styled with an inverted theme. It displays navigation items in a dark background with light text. It is always placed right below the header. Use inverted property for this.

triggerLabel property is mandatory because it specifies the name of the trigger of the dropdown that will be placed when the screen when on small screens.

Item

For enabling more personalization on NavigationBar items, you can pass <ClayNavigationBar.Item> component to specify the element that will be rendered as an item.

Use the property active to specify which element is currently active on the navigation.

Copied!

nav-link class is mandatory for styling the children of ClayNavigationBar.Item as Lexicon describes but if you don't prefer to follow Lexicon, you can style with whatever you want.

  • Item 1
  • Item 2
  • Item 3
Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!