UikNavPanel

This is a wrapping component for your navigation panel. It is meant to use in synergy with UikContainerHorizontal (see full example how to build a layout). It is styled to have a width of 270px, including some styles such as a border line on the right side.

The css property overflow: auto will make sure the user will be able to scroll if the content doesn't fit the size.

List of related components

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullclassName, e.g. "my-custom-styling"
positionRightBooleanfalsefalseRenders border on left side if true
...restanyfalseOther properties are passed down to the wrapping element

Full Example

ComponentExample Code
<UikNavPanel>
  <UikNavTitle>HR Online</UikNavTitle>
  <UikNavSection>
    <UikNavSectionTitle>Menu</UikNavSectionTitle>
    <UikNavLink
      className="active"
      rightEl="23"
    >
      Documents
    </UikNavLink>
    <UikNavLink>People in the company</UikNavLink>
  </UikNavSection>
  <UikNavSection>
    <UikNavSectionTitle>Support</UikNavSectionTitle>
    <UikNavLink>Help Desk</UikNavLink>
    <UikNavLink>FAQ</UikNavLink>
  </UikNavSection>
</UikNavPanel>