UikNavLink

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullyour className or "active" to display active state
rightElReact.NodefalsenullNode element to be displayed on the right side, e.g. number of items
iconReact.NodefalsenullNode element to be displayed on the left side, e.g. icon
ComponentReact.ElementTypefalse"a"Renders the component with a given react element. By default, the component renders <a />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
highlightedBooleanfalsefalseJust makes the text bold
...restanyfalseOther properties are passed down to the wrapping element

UikNavLink Examples

ComponentExample Code
Some Link
<UikNavLink>
  Some Link
</UikNavLink>
Some Link23
<UikNavLink
  rightEl="23"
>
  Some Link
</UikNavLink>
🏃🏻Some Link23
<UikNavLink
  icon="🏃🏻"
  rightEl="23"
>
  Some Link
</UikNavLink>
🏃🏻Some Link23
<UikNavLink
  className="active"
  highlighted
  icon="🏃🏻"
  rightEl="23"
>
  Some Link
</UikNavLink>
Some Link
import { NavLink } from 'react-router-dom'
// renders with NavLink from react-router
<UikNavLink Component={NavLink}>
  Some Link
</UikNavLink>