Installing <Nav> Component

There are 2 ways to install <Nav> component into your react app project:

  • Install the Specific Package of <Nav> Component
  • Install the Whole Reusable-UI Component Pack, including the <Nav> Component

Navigation Properties

Specifies how comparisons are made for the current URL with the href/to property inside <Link> component.

In order to the properties below to work, you should place a <Link> component inside the <NavItem>, with the href property (NextJS) or to property (ReactRouter).

// NextJs:
<NavItem caseSensitive={false} end={false}>
    <Link href='/products'>Products</Link>
</NavItem>

// ReactRouter:
<NavItem caseSensitive={false} end={false}>
    <Link to='/products'>Products</Link>
</NavItem>

caseSensitive Property

Defines the string sensivity comparison for the current URL with the href/to property inside <Link> component.

The possible values are:

  • undefined
  • true
  • false

end Property

Determines how nested URLs are treated against the href/to property inside <Link> component.

The possible values are:

  • undefined
  • true
  • false

Client Side Link

Navigates between pages using JavaScript way, without causing a whole page HTTP request.

<NavItem> designed to work with <Link> component of React Router and Next JS (Gatsby JS and React Remix are coming soon).

When there is a <Link> component inside the <NavItem>, at render phase, the hierarchy of <NavItem> and <Link> is automatically swapped for you. Here the illustration:

Show code

href Property

Navigates to another pages or to external websites using traditional link.

onClick Property

Executes a JavaScript's callback function when the <NavItem> is clicked.

Variant Properties

The alternative appearances of the <Nav> layout without changing the <Nav>'s functionality.

listStyle Property

Sets the alternative appearances of the <Nav>.

The possible values are:

  • undefined
  • 'regular'
  • 'flat'
  • 'flush'
  • 'joined'
  • 'content'
  • 'button'
  • 'tab'
  • 'breadcrumb'
  • 'bullet'
  • 'numbered'

Here the preview:

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Nav>.

You can set the mild individually for each <NavItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Show code

State Properties

The conditions of the <Nav> behavior or functionality.

inheritEnabled Property

Influences the <Nav>'s disabled state by <ancestor enabled={false}>.

You can set the inheritEnabled individually for each <NavItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Show code

Component Properties

Overwrites the internal (sub) components used as the composition of <Nav> component.

listComponent Property

Overwrites the internal <List> component used as the composition of <Nav> component.

<Nav listComponent={
    <MyCustomList />
} />

listItemComponent Property

Overwrites the internal <ListItem> component used as the composition of <NavItem> component.

<NavItem listItemComponent={
    <MyCustomListItem />
} />