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={function E(){}}
        to="/docs/react/top-bar-link"
      >
        react-router Link
      </TopBarLink>
    </TopBarLinkContainer>
  </TopBarSection>
</TopBar>
ReactHTML Snippet

Prop table

children

false

type: React.ReactNode
className

false

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

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

false

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