Navigation

This styleguide comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.

const FilterList = require('gitbook-styleguide/lib/FilterList');
const Menu = require('gitbook-styleguide/lib/Menu');
const SearchBar = require('gitbook-styleguide/lib/SearchBar');
const PageHead = require('gitbook-styleguide/lib/PageHead');
const Pagination = require('gitbook-styleguide/lib/Pagination');
const ListGroup = require('gitbook-styleguide/lib/ListGroup');
const Overview = require('gitbook-styleguide/lib/Overview');

Page head with menu

<PageHead>
<Container>
<Row>
<Row.Col md={5}>
<PageHead.Title>
Contact GitBook
</PageHead.Title>
</Row.Col>
<Row.Col md={7}>
<Menu right>
<Menu.Item>About</Menu.Item>
<Menu.Item active>Contact</Menu.Item>
<Menu.Item>Terms of Service</Menu.Item>
</Menu>
</Row.Col>
</Row>
</Container>
</PageHead>

Page head with search bar

Explore GitBook

<PageHead>
<Container>
<Row>
<Row.Col md={8}>
<PageHead.Title>
<Icon id="star" size="sm" /> Explore GitBook
</PageHead.Title>
</Row.Col>
<Row.Col md={4}>
<SearchBar placeholder="Search books" />
</Row.Col>
</Row>
</Container>
</PageHead>

Page head with overview

myorg
My Book

Updated 2 days ago

<PageHead>
<Container>
<Overview>
<Overview.Title>
<Overview.StepTitle href="/">
myorg
</Overview.StepTitle>
<Overview.StepDivider />
<Overview.StepTitle primary>
My Book
</Overview.StepTitle>
</Overview.Title>
<Overview.Note>
Updated 2 days ago
</Overview.Note>
</Overview>
</Container>
<Container>
<Menu left>
<Menu.Item>Overview</Menu.Item>
<Menu.Item active>Metrics</Menu.Item>
<Menu.Item>Settings</Menu.Item>
</Menu>
</Container>
</PageHead>

Menu

The menu is a vertical list of navigational links. It should be put in a panel.
<Panel>
<ListGroup>
<ListGroup.Item active={true}>
<Icon id="gear" size="sm" /> Account
</ListGroup.Item>
<ListGroup.Item>
<Icon id="person" size="sm" /> Profile
</ListGroup.Item>
<ListGroup.Item>
<Icon id="mail" size="sm" /> Notifications
</ListGroup.Item>
</ListGroup>
</Panel>

Filter list

A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
<FilterList>
<FilterList.Item selected={true} count={21}>First filter</FilterList.Item>
<FilterList.Item count={3}>Second filter</FilterList.Item>
<FilterList.Item>Third filter</FilterList.Item>
</FilterList>

Pagination

<Pagination page={4} pages={20} pagesToList={3} />