Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Usage
  2. Prop Table

TopBarLink

import { TopBarLink } from '@duik/it'
import TopBarLink from '@duik/top-bar-link'

Prestyled navigation for top bar. Check the full usage on Building Top Bar. For the best usage, wrap your TopBarTitle with TopBarLinkContainer.

Title

<TopBar>
  <TopBarSection>
    <TopBarTitle>
      Title
    </TopBarTitle>
  </TopBarSection>
  <TopBarSection>
    <TopBarLinkContainer>
      <TopBarLink href="#">
        Link 1
      </TopBarLink>
      <TopBarLink href="#">
        Link 2
      </TopBarLink>
      <TopBarLink
        Component={{
          $$typeof: Symbol(react.forward_ref),
          render: function x(){}
        }}
        to="/docs/react/top-bar-link"
      >
        react-router Link
      </TopBarLink>
    </TopBarLinkContainer>
  </TopBarSection>
</TopBar>
ReactHTML Snippet

Prop table

children

Required: false

type: React.ReactNode
className

Required: false

type: string
className, e.g. "my-custom-styling"
Component

Required: false

type: React.Component | React.FunctionalComponent | string

default value: "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.
...rest

Required: false

type: any
Any props you would pass to <a> or a "Component" prop.