Nav

The Nav component allows you to build all types of navigation components.

Basic Demo

Creating navs can be easily achieved using the Nav component together with the NavItem component.

import React from "react";
import { Nav, NavItem, NavLink } from "shards-react";

export default function NavExample() {
  return (
    <Nav>
      <NavItem>
        <NavLink active href="#">
          Active
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Another Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink disabled href="#">
          Disabled Link
        </NavLink>
      </NavItem>
    </Nav>
  );
}

Tabs Style

Using the tabs prop, you can style the navs to look like tabs.

import React from "react";
import { Nav, NavItem, NavLink } from "shards-react";

export default function NavTabsExample() {
  return (
    <Nav tabs>
      <NavItem>
        <NavLink active href="#">
          Active
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Another Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink disabled href="#">
          Disabled Link
        </NavLink>
      </NavItem>
    </Nav>
  );
}

Pills Style

Using the pills prop you can style the navs to look like pills.

import React from "react";
import { Nav, NavItem, NavLink } from "shards-react";

export default function NavPillsExample() {
  return (
    <Nav pills>
      <NavItem>
        <NavLink active href="#">
          Active
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Another Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink disabled href="#">
          Disabled Link
        </NavLink>
      </NavItem>
    </Nav>
  );
}

Fill Style

Using the fill prop, you can force the nav content to extend the full available width.

import React from "react";
import { Nav, NavItem, NavLink } from "shards-react";

export default function NavPillsExample() {
  return (
    <Nav fill>
      <NavItem>
        <NavLink href="#">Active</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Another Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink disabled href="#">
          Disabled Link
        </NavLink>
      </NavItem>
    </Nav>
  );
}

Justified

Using the justified prop, you can define equal-width nav elements.

import React from "react";
import { Nav, NavItem, NavLink } from "shards-react";

export default function NavPillsExample() {
  return (
    <Nav justified>
      <NavItem>
        <NavLink href="#">Active</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Another Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink disabled href="#">
          Disabled Link
        </NavLink>
      </NavItem>
    </Nav>
  );
}

Props

The following props are available for the Nav component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
navbar	Whether it is located inside a Navbar, or not.	`Bool`	-	No
horizontal	Justify content horizontally.	`String`	-	No
tabs	Whether it should be displayed as tabs, or not.	`Bool`	-	No
card	Whether it is located inside a card, or not.	`Bool`	-	No
pills	Whether it should be displayed as pills, or not.	`Bool`	-	No
justified	Whether it is justified, or not.	`Bool`	-	No
fill	Whether it should fill the entire space, or not.	`Bool`	-	No
vertical	Whether it is vertical, or not.	`BoolString`	`false`	No
tag	The component's tag type.	`FuncString`	`"ul"`	No

Subcomponents

The following subcomponents are available for the Nav component.

<NavItem/>

Prop	Description	Type	Default	Required
active	Whether it is active, or not.	`Bool`	-	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"li"`	No

<NavLink/>

Prop	Description	Type	Default	Required
disabled	Whether it is disabled, or not.	`Bool`	-	No
active	Whether it is active, or not.	`Bool`	-	No
className	The class name.	`String`	-	No
onClick	The function that should be triggered on click.	`Func`	-	No
href	The href attribute value.	`Any`	-	No
tag	The component's tag type.	`FuncString`	`"a"`	No
innerRef	The inner ref.	`ObjectFuncString`	-	No