@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiNavbar & UiNavbarItem


Package: @uireact/navbar

v3.1.11

Creates a navbar container and provides components to provide styling and coloration based on the theme

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/navbar

#

Animated navbar example

This example uses framer motion variants to animate the icon when you hover on each navbar item.

  <AnimatedNavbarExample />

You can give it a check to this example here.

#

Usage as a stacked navbar

  <UiNavbar orientation="stacked" noBackground appearance="rounded">
    <UiNavbarItem>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 1
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 2
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem active>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 3
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 4
        </a>
      </UiLink>
    </UiNavbarItem>
  </UiNavbar>

#

Usage as an inline navbar

  <UiNavbar orientation="inline" stretch noBackground>
    <UiNavbarItem>
      <UiText padding={{all: 'four'}}>Option 1</UiText>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiText padding={{all: 'four'}}>Option 2</UiText>
    </UiNavbarItem>
  </UiNavbar>

#

Usage with category and hoverColoration

  <UiNavbar category="primary" hoverColoration="dark" noBackground>
    <UiNavbarItem>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 1
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 2
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem active>
      <UiLink padding={{all: 'four'}}>
        <a href="https://uireact.io" target="_blank">
          Option 3
        </a>
      </UiLink>
    </UiNavbarItem>
  </UiNavbar>

#

Styling and appearance

We have added a few possibilities for styling and appearance.

The styling will orchestrate the coloration scheme:

  • Bordered: Only a border of the item will be highlighted
  • Filled: The entire item will be highlighted

The rounded prop let you configure the rounded corners for navbar items

  • All: The items will render with rounded items
  • Edges: Only the items at the edges will have rounded corners
  • None: The item will render squared

#

Usage with icons in navbar

This is an example of our docs navbar

  <UiNavbar 
    orientation="stacked" 
    rounded="all" 
    styling="filled" 
    gap="five" 
    category="primary" 
    hoverColoration="light"
    noBackground
  >
    <UiNavbarItem active>
      <UiLink padding={{ block: 'four', inline: 'four' }}>
        <a href="#">
          <UiIcon icon="Settings" /> Option 1
        </a>
      </UiLink>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiLink padding={{ block: 'four', inline: 'four' }}>
        <a href="#">
          <UiIcon icon="BatteryFull" /> Option 2
        </a>
      </UiLink>
    </UiNavbarItem>
  </UiNavbar>

#

Usage with rounded edges and filled styling

  <UiNavbar rounded="edges" styling="filled" category="tertiary">
    <UiNavbarItem active>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 1</UiText>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 2</UiText>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 3</UiText>
    </UiNavbarItem>
  </UiNavbar>

#

With filled styling, rounded appearance and hoverColoration light

  <UiNavbar rounded="all" styling="filled" gap="five" category="primary" hoverColoration="light">
    <UiNavbarItem active>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 1</UiText>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 2</UiText>
    </UiNavbarItem>
  </UiNavbar>

#

With bordered styling, noBackground and gap

  <UiNavbar orientation="stacked" styling="bordered" gap="four" category="tertiary" noBackground>
    <UiNavbarItem active>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 1</UiText>
    </UiNavbarItem>
    <UiNavbarItem>
      <UiText padding={{block: 'three', inline: 'four'}}>Option 2</UiText>
    </UiNavbarItem>
  </UiNavbar>