Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Example
  2. With navigation
  3. Extra elements

Building Top Bar

In order to create consitent UI, we are including some handy components for building TopBar in a simplest way possible. Of course, you don't have to limit yourself to these examples, but it's the fastest way to build the top bars that matches the design language of the kit!

This page offers some specific examples of how to build your perfect TopBar. Make sure you visit Building Layout page as well!

List of related components

  1. TopBar
  2. TopBarLink
  3. TopBarLinkContainer
  4. TopBarSection
  5. TopBarTitle

Simple TopBar Example

Dashboard

Some content
<>
  <TopBar>
    <TopBarSection>
      <TopBarTitle>
        Dashboard
      </TopBarTitle>
    </TopBarSection>
    <TopBarSection>
      <Button primary>
        Login
      </Button>
    </TopBarSection>
  </TopBar>
  <section
    style={{
      background: 'var(--bg-base)',
      padding: 50,
      textAlign: 'center'
    }}
  >
    Some content
  </section>
</>
ReactHTML Snippet

Dashboard

Some content
<>
  <TopBar>
    <TopBarSection>
      <TopBarSection>
        <TopBarTitle>
          Dashboard
        </TopBarTitle>
        <TopBarSection />
        <TopBarLinkContainer>
          <TopBarLink href="#">
            Link 1
          </TopBarLink>
          <TopBarLink className="active" href="#">
            Link 2
          </TopBarLink>
        </TopBarLinkContainer>
      </TopBarSection>
    </TopBarSection>
    <TopBarSection>
      <TopBarSection>
        <TopBarLinkContainer>
          <TopBarLink href="#">
            Link 3
          </TopBarLink>
          <TopBarLink href="#">
            Link 4
          </TopBarLink>
        </TopBarLinkContainer>
      </TopBarSection>
      <TopBarSection>
        <Button primary>
          Login
        </Button>
      </TopBarSection>
    </TopBarSection>
  </TopBar>
  <section
    style={{
      background: 'var(--bg-base)',
      padding: 50,
      textAlign: 'center'
    }}
  >
    Some content
  </section>
</>
ReactHTML Snippet

front_storeDashboard

search_left
Some content
<>
  <TopBar>
    <TopBarSection>
      <TopBarSection>
        <TopBarTitle>
          <Icon className="c-primary">
            front_store
          </Icon>
          Dashboard
        </TopBarTitle>
        <TopBarSection />
        <TopBarLinkContainer>
          <TopBarLink href="#">
            Link 1
          </TopBarLink>
          <TopBarLink className="active" href="#">
            Link 2
          </TopBarLink>
        </TopBarLinkContainer>
      </TopBarSection>
    </TopBarSection>
    <TopBarSection>
      <TextField
        placeholder="Search for lemonades"
        rightEl={<Icon>search_left</Icon>}
      />
    </TopBarSection>
  </TopBar>
  <section
    style={{
      background: 'var(--bg-base)',
      padding: 50,
      textAlign: 'center'
    }}
  >
    Some content
  </section>
</>
ReactHTML Snippet