@# Navbar

Navbars present useful navigation controls at the top of an application.

@reactExample NavbarExample

@### Fixed to viewport top

Enable the `fixedToTop` prop to attach a navbar to the top of the viewport using
`position: fixed; top: 0;`. This is so-called "sticky" behavior: the navbar
stays at the top of the screen as the user scrolls through the document.

This modifier is not illustrated here because it breaks the document flow.

Body padding required

The fixed navbar will lie on top of your other content unless you add padding to the top of the
`<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable.

@### Fixed width

If your application is inside a fixed-width container (instead of spanning the
entire viewport), you can align the navbar to match by wrap your navbar groups
in an element with your desired `width` and `margin: 0 auto;` to horizontally
center it.

@css navbar-container

@## Props

The `Navbar` API includes four stateless React components:

* `Navbar`
* `NavbarGroup` (aliased as `Navbar.Group`)
* `NavbarHeading` (aliased as `Navbar.Heading`)
* `NavbarDivider` (aliased as `Navbar.Divider`)

These components are simple containers for their children. Each of them supports
the full range of HTML `<div>` props.

```tsx
<Navbar>
    <Navbar.Group align={Alignment.LEFT}>
        <Navbar.Heading>Blueprint</Navbar.Heading>
        <Navbar.Divider />
        <Button className="@ns-minimal" icon="home" text="Home" />
        <Button className="@ns-minimal" icon="document" text="Files" />
    </Navbar.Group>
</Navbar>
```

@interface INavbarProps

@interface INavbarGroupProps

@interface INavbarHeadingProps

@interface INavbarDividerProps

@## CSS

Use the following classes to construct a navbar:

* `nav.@ns-navbar` – The parent element. Use a `<nav>` element for accessibility.
* `.@ns-navbar-group.@ns-align-(left|right)` – Left- or right-aligned group.
* `.@ns-navbar-heading` – Larger text for your application title.
* `.@ns-navbar-divider` – Thin vertical line that can be placed between groups of elements.

@css navbar
