Components

Navigation Bar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Navigation bar is a menu that contains structured links and functions to direct the user to another page from the page that is being displayed.

use of components don’t forget to add import legion-ui

import { Navbar, NavbarBrand, NavbarCollapse, NavbarContent, NavbarItem, NavbarToggle } from 'legion-ui';

Variant

Legion Have 4 variant of Navigation Bar:

you can add Button component in navigation or other components

const NavigationLogin = () => {
  const [activeToggle, setActiveToggle] = useState(false);

  return (
    <Navbar variant="sticky" mode="light">
      <NavbarBrand style={{ display: 'flex', alignItem: 'center' }}>
        <Heading size="h3" color="primary500">
          Legion
        </Heading>

this navigation bar with added menu

const NavigationMenu = () => {
  const [activeToggle, setActiveToggle] = useState(false);

  return (
    <Navbar variant="sticky" mode="light">
      <NavbarBrand style={{ display: 'flex', alignItem: 'center' }}>
        <Heading size="h3" color="primary500">
          Legion
        </Heading>

this navigation bar added searchcomponent

const NavigationSearch = () => {
  const [activeToggle, setActiveToggle] = useState(false);

  return (
    <Navbar variant="sticky" mode="light">
      <NavbarBrand style={{ display: 'flex', alignItem: 'center' }}>
        <Heading size="h3" color="primary500">
          Legion
        </Heading>

this navigation bar added icon, search and avatar

const NavigationAvatar = () => {
  const [activeToggle, setActiveToggle] = useState(false);

  return (
    <Navbar variant="sticky" mode="light">
      <NavbarBrand style={{ display: 'flex', alignItem: 'center' }}>
        <Heading size="h3" color="primary500">
          Legion
        </Heading>

Props

Main Navbar, the very outer wrapper

property	propType	required	default	description
children	`React.ReactNode`	-	-	Pass all the necessary components here
isBordered	`boolean`	-	`false`	Makes the navbar have border around it (only avail in floating variant)
isCompact	`boolean`	-	`false`	Makes the navbar have no vertical (top and bottom) gap
mode	`light` \| `dark`	-	`light`	Sets the navbar background mode
variant	`static` \| `floating` \| `sticky`	-	`static`	Sets the navbar position

NavbarBrand

Wraps the left side of the Navbar, wrap your logo inside here

property	propType	required	default	description
children	`React.ReactNode`	-	-	Pass all the necessary components here

NavbarCollapse

Wrapper to hold the mobile/tablet navigation of your App, you can ignore this if you don’t need responsive menu

property	propType	required	default	description
children	`React.ReactNode`	-	-	Pass all the necessary components here
isActive	`boolean`	-	`false`	Will show when isActive value is true, trigger it with React’s state in your App

NavbarContent

Wraps usually the mid and right side of the Navbar, wrap your contents such as menu, buttons, search inputs, avatar, around here.

property	propType	required	default	description
children	`React.ReactNode`	-	-	Pass all the necessary components here
hideIn	`sm` \| `md` \| `lg` \| `xl`	-	`md`	Make sure to hide the contents when it reached the given hideIn value

NavbarItem

List of childs of your menu after being wrapped inside NavbarContent

property	propType	required	default	description
children	`React.ReactNode`	-	-	Pass all the necessary components here
href	`string`	-	-	Routing address you desire to fill in
isActive	`boolean`	-	`false`	Will get highlighted if value is true, useful usually combined with routing to indicate in which route are we

NavbarToggle

A menu button to click, to trigger the NavbarCollapse activation.

property	propType	required	default	description
onClick	React.MouseEventHandler	-	-	onClick trigger, make it a setState function to change the boolean value to trigger NavbarCollapse’s show/hide
showIn	`sm` \| `md` \| `lg` \| `xl`	-	`md`	Make sure to show the toggle when it reached the given showIn value

Do you have feedback?

Please let us know to make it better

Send Feedback