gallery_grid_viewScreen PreviewsrocketGetting StartedhelpReact DocsmultitaskingChangeloglightbulbSupportloveDownload kit

helpDocumentation

Getting StartedReact DocumentationSupportChangelog
Screen PreviewsrocketDownload Kit
GuidesElements Styleguide→Importing and Bundle Size→"Component" Property→Building layouts with Uik→
ComponentsAvatar→Button→ButtonGroup→Chart→ChartLineBlank→Checkbox→CodeHighlight→CodeHighlightContainer→ContainerHorizontal→ContainerVertical→ContentTitle→Divider→Dropdown→DropdownItem→EmojiHeadline→FormInputGroup→Headline→HeadlineDesc→Input→MapPinCircle→NavBurger→NavLink→NavLinkDark→NavLinkSecondary→NavLinkTwo→NavPanel→NavSection→NavSectionTitle→NavTitle→OutsideClickHandler→ProgressBar→Radio→Select→StarRating→Tabs→Tag→TagContainer→Toggle→TopBar→TopBarLink→TopBarLinkContainer→TopBarSection→TopBarTitle→Uikon→Widget→WidgetBottomCta→WidgetContent→WidgetDoc→WidgetHeader→WidgetTable→

UikNavSection

Just a wrapper for a nav section used in UikNavPanel, which separates the content and adds some margins around.

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullclassName, e.g. "my-custom-styling"
...restanyfalseOther properties are passed down to the wrapping element

UikNavSection Examples

ComponentExample Code
Section Namegallery_grid_viewSome Link23helpHelp23
Another SectionAnother LinkFourth Link
<UikNavSection>
  <UikNavSectionTitle>
    Section Name
  </UikNavSectionTitle>
  <UikNavLink
    className="active"
    highlighted
    icon={ (
      <Uikon>
        gallery_grid_view
      </Uikon>
    ) }
    rightEl={ 23 }
  >
    Some Link
  </UikNavLink>
  <UikNavLink
    highlighted
    icon={ (
      <Uikon>
        help
      </Uikon>
    ) }
    rightEl={ 23 }
  >
    Help
  </UikNavLink>
</UikNavSection>

<UikNavSection>
  <UikNavSectionTitle>
    Another Section
  </UikNavSectionTitle>
  <UikNavLink highlighted>
    Another Link
  </UikNavLink>
  <UikNavLink highlighted>
    Fourth Link
  </UikNavLink>
</UikNavSection>