TopBar

The TopBar component is a navigation element intended to be placed at the top of the page. The TopBar component supports many different layout options. The TopBar component also supports the inclusion of any arbitrary child components.

<div>
  <TopBar>
    <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
    <TopBar.Item>
      <Menu horizontalLeft>
        <Menu.Item><a href="#">One</a></Menu.Item>
        <Menu.Item><a href="#">Two</a></Menu.Item>
      </Menu>
    </TopBar.Item>
    <TopBar.Item>
      <Form>
        <InputGroup>
          <InputGroup.Field>
            <Input type="text" placeholder="Search" />
          </InputGroup.Field>
          <Button>Search</Button>
        </InputGroup>
      </Form>
    </TopBar.Item>
  </TopBar>
</div>

<div>
  <TopBar>
    <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
    <TopBar.Item>
      <Menu horizontalLeft>
        <Menu.Item><a href="#">One</a></Menu.Item>
        <Menu.Item><a href="#">Two</a></Menu.Item>
      </Menu>
    </TopBar.Item>
    <TopBar.Item>
      <Form>
        <InputGroup>
          <InputGroup.Field>
            <Input type="text" placeholder="Search" />
          </InputGroup.Field>
          <Button>Search</Button>
        </InputGroup>
      </Form>
    </TopBar.Item>
  </TopBar>
</div>

<TopBar center>
  <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<TopBar center>
  <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<TopBar left>
  <TopBar.Item>
    <a href="#" className="rev-Brand">LOGO</a>
  </TopBar.Item>
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<TopBar left>
  <TopBar.Item>
    <a href="#" className="rev-Brand">LOGO</a>
  </TopBar.Item>
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<TopBar right>
  <TopBar.Item>
    <a href="#" className="rev-Brand">LOGO</a>
  </TopBar.Item>
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<TopBar right>
  <TopBar.Item>
    <a href="#" className="rev-Brand">LOGO</a>
  </TopBar.Item>
  <TopBar.Item>
    <Menu horizontalLeft>
      <Menu.Item><a href="#">One</a></Menu.Item>
      <Menu.Item><a href="#">Two</a></Menu.Item>
    </Menu>
  </TopBar.Item>
  <TopBar.Item>
    <Form>
      <InputGroup>
        <InputGroup.Field>
          <Input type="text" placeholder="Search" />
        </InputGroup.Field>
        <Button>Search</Button>
      </InputGroup>
    </Form>
  </TopBar.Item>
</TopBar>

<div>
  <Col>
    <h3>Scrollable Topbar-item</h3>
  </Col>
  <Col>
    <TopBar>
      <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
      <TopBar.Item scroll>
        <Menu horizontalLeft>
          <Menu.Item><a href="#">One</a></Menu.Item>
          <Menu.Item><a href="#">Two</a></Menu.Item>
          <Menu.Item><a href="#">Three</a></Menu.Item>
          <Menu.Item><a href="#">Four</a></Menu.Item>
          <Menu.Item><a href="#">Five</a></Menu.Item>
          <Menu.Item><a href="#">Six</a></Menu.Item>
          <Menu.Item><a href="#">Seven</a></Menu.Item>
          <Menu.Item><a href="#">Eight</a></Menu.Item>
          <Menu.Item><a href="#">Nine</a></Menu.Item>
        </Menu>
      </TopBar.Item>
      <TopBar.Item scrollMediumDown>
        <Form>
          <InputGroup>
            <InputGroup.Field>
              <Input type="text" placeholder="Search" />
            </InputGroup.Field>
            <Button>Search</Button>
          </InputGroup>
        </Form>
      </TopBar.Item>
    </TopBar>
  </Col>

</div>

<div>
  <Col>
    <h3>Scrollable Topbar-item</h3>
  </Col>
  <Col>
    <TopBar>
      <Brand linkPath="/" imagePath="/images/harmonium-symbol.png" altTag="logo alt tag" />
      <TopBar.Item scroll>
        <Menu horizontalLeft>
          <Menu.Item><a href="#">One</a></Menu.Item>
          <Menu.Item><a href="#">Two</a></Menu.Item>
          <Menu.Item><a href="#">Three</a></Menu.Item>
          <Menu.Item><a href="#">Four</a></Menu.Item>
          <Menu.Item><a href="#">Five</a></Menu.Item>
          <Menu.Item><a href="#">Six</a></Menu.Item>
          <Menu.Item><a href="#">Seven</a></Menu.Item>
          <Menu.Item><a href="#">Eight</a></Menu.Item>
          <Menu.Item><a href="#">Nine</a></Menu.Item>
        </Menu>
      </TopBar.Item>
      <TopBar.Item scrollMediumDown>
        <Form>
          <InputGroup>
            <InputGroup.Field>
              <Input type="text" placeholder="Search" />
            </InputGroup.Field>
            <Button>Search</Button>
          </InputGroup>
        </Form>
      </TopBar.Item>
    </TopBar>
  </Col>

</div>

Properties:

Name	Type	Default	Description
TopBar Props
Name:`scroll`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item` when the container needs to scroll at all screen sizes.
Name:`scrollSmall`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at small-only breakpoint.
Name:`scrollMedium`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at medium breakpoint and up.
Name:`scrollMediumDown`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at medium breakpoint and down.
Name:`scrollLarge`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at large breakpoint and up.
Name:`scrollLargeDown`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at large breakpoint and down.
Name:`scrollXlarge`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at xlarge breakpoint and up.
Name:`scrollXlargeDown`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at xlarge breakpoint and down.
Name:`scrollNav`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. If you have updated the `$screen-width-nav` breakpoint var so that it is not using the default size, this prop can be used to make the container scrollable at your customized nav breakpoint and up.
Name:`scrollNavOnly`	Type:bool	Default:none	Description:Apply to `rev-TopBar-item`. Scrolls at nav-only breakpoint.