Paragon Design System

Navigation
npm_versionnpm Paragon package page

Navbar

Edit this pagein a new tabLeave feedbackin a new tab

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

This is a pass through component from React-Bootstrap.

See React-Bootstrap for documentation.

Basic Usage

Any Paragon component or export may be added to the code example.

Theme Variables#

CSS VariableComputed Value
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌

Props API#

Navbar Props API
  • as elementType

    Set a custom element for this component.

    Default'nav'
  • bg string

    A convenience prop for adding bg-* utility classes since they are so commonly used here. light and dark are common choices but any bg-* class is supported, including any custom ones you might define.

    Pairs nicely with the variant prop.

  • collapseOnSelect bool

    Toggles expanded to false after the onSelect event of a descendant of a child <Nav> fires. Does nothing if no <Nav> or <Nav> descendants exist.

    Manually controlling expanded via the onSelect callback is recommended instead, for more complex operations that need to be executed after the select event of <Nav> descendants.

    Defaultfalse
  • expand enumtrue | 'sm' | 'md' | 'lg' | 'xl'

    The breakpoint, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size.

    Defaulttrue
  • expanded bool

    Controls the visibility of the navbar body

  • fixed enum'top' | 'bottom'

    Create a fixed navbar along the top or bottom of the screen, that scrolls with the page. A convenience prop for the fixed-* positioning classes.

  • onSelect func

    A callback fired when a descendant of a child <Nav> is selected.

    Default() => {}
  • onToggle func

    A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new expanded boolean value.

    Controls expanded.

    Default() => {}
  • role string

    The ARIA role for the navbar, will default to 'navigation' for Navbars whose as is something other than <nav>.

    Default'navigation'
  • sticky enum'top'

    Position the navbar at the top of the viewport, but only after scrolling past it. A convenience prop for the sticky-top positioning class.

  • variant enum'light' | 'dark'

    The general visual variant a the Navbar. Use in combination with the bg prop, background-color utilities, or your own background styles.

    Default'light'
  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

    Default'navbar'
NavbarBrand Props API
  • as elementType

    Set a custom element for this component.

    Default'nav'
  • href string

    An href, when provided the Brand will render as an <a> element (unless as is provided).

  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

    Default'navbar'
NavbarToggle Props API
  • as elementType

    Set a custom element for this component.

    Default'button'
  • children node

    The toggle content. When empty, the default toggle will be rendered.

  • label string

    An accessible ARIA label for the toggler button.

    Default'Toggle navigation'
  • onClick func

    Specifies the callback function when the toggle is clicked.

    Default() => {}
  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

    Default'navbar-toggler'
NavbarCollapse Props API
  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

    Default'navbar-collapse'

Usage Insights#

Navbar

frontend-app-admin-portal21.13.11
frontend-app-learner-portal-enterprise21.13.11

NavbarBrand

frontend-app-learner-portal-enterprise21.13.11
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)