UikTopBar

A container component that maintains just simply maintains a height. A set of components is coded to use within the UikTopBar for faster developing. By default, the display is set to display: flex; justify-content: space-between;

List of related components

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullclassName, e.g. "my-custom-styling"
centerBooleanfalsefalseCenters the content inside with justify-content: center
...restanyfalseOther properties are passed down to the wrapping element

Simple Example

Dashboard

Some content
<div className={ cls.asPage }> // pretend this is body

  <UikTopBar>

    <UikTopBarSection>
      <UikTopBarTitle>Dashboard</UikTopBarTitle>
    </UikTopBarSection>

    <UikTopBarSection>
      <UikButton primary>Login</UikButton>
    </UikTopBarSection>

  </UikTopBar>

  <div className={ cls.content }>
    Some content
  </div>
</div>

With links, search input and others

building_planDashboard

search_left
Some content

<div className={ cls.asPage }>
  <UikTopBar>

    <UikTopBarSection>
      <UikTopBarTitle>
        <Uikon>building_plan</Uikon>
        Dashboard
      </UikTopBarTitle>
    </UikTopBarSection>

    <UikTopBarSection>

      <UikTopBarLinkContainer>
        <UikTopBarLink>Cakes</UikTopBarLink>
        <UikTopBarLink>Breads</UikTopBarLink>
        <UikTopBarLink>Other</UikTopBarLink>
      </UikTopBarLinkContainer>

      <UikDivider
        margin
        vertical
      />

      <UikInput
        icon={ <Uikon>search_left</Uikon> }
        iconPosition="right"
        placeholder="Search for pastry"
      />

      <UikButton
        primary
        style={ { marginLeft: '15px' } }
      >
        Login
      </UikButton>

    </UikTopBarSection>

  </UikTopBar>

  <div className={ cls.content }>
    Some content
  </div>
</div>