---
title: Navbar
---
# Navbar
**Navbar** presents useful navigation controls at the top of an application.
## Import
```ts copy
import { Navbar } from "@blueprintjs/core";
```
@reactExample NavbarExample
## Usage
The **Navbar** API includes four stateless React components:
- **Navbar**
- **NavbarGroup** (aliased as `Navbar.Group`)
- **NavbarHeading** (aliased as `Navbar.Heading`)
- **NavbarDivider** (aliased as `Navbar.Divider`)
Nested components are deprecated
Use of the nested components such as `` is deprecated. Use the top-level components (e.g. ``)
instead.
These components are simple containers for their children. Each of them supports the full range of HTML `
`
DOM attributes.
```tsx
Blueprint
```
### 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 `` 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.
@reactCodeExample NavbarFixedWidthExample
## Props interface
@interface NavbarProps
@interface NavbarGroupProps
@interface NavbarHeadingProps
@interface NavbarDividerProps