| 1 | @# Navbar
|
| 2 |
|
| 3 | Navbars present useful navigation controls at the top of an application.
|
| 4 |
|
| 5 | @reactExample NavbarExample
|
| 6 |
|
| 7 | @### Fixed to viewport top
|
| 8 |
|
| 9 | Enable the `fixedToTop` prop to attach a navbar to the top of the viewport using
|
| 10 | `position: fixed; top: 0;`. This is so-called "sticky" behavior: the navbar
|
| 11 | stays at the top of the screen as the user scrolls through the document.
|
| 12 |
|
| 13 | This modifier is not illustrated here because it breaks the document flow.
|
| 14 |
|
| 15 | <div class="@ns-callout @ns-intent-danger @ns-icon-error">
|
| 16 | <h4 class="@ns-heading">Body padding required</h4>
|
| 17 |
|
| 18 | The fixed navbar will lie on top of your other content unless you add padding to the top of the
|
| 19 | `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable.
|
| 20 |
|
| 21 | </div>
|
| 22 |
|
| 23 | @### Fixed width
|
| 24 |
|
| 25 | If your application is inside a fixed-width container (instead of spanning the
|
| 26 | entire viewport), you can align the navbar to match by wrap your navbar groups
|
| 27 | in an element with your desired `width` and `margin: 0 auto;` to horizontally
|
| 28 | center it.
|
| 29 |
|
| 30 | @css navbar-container
|
| 31 |
|
| 32 | @## Props
|
| 33 |
|
| 34 | The `Navbar` API includes four stateless React components:
|
| 35 |
|
| 36 | * `Navbar`
|
| 37 | * `NavbarGroup` (aliased as `Navbar.Group`)
|
| 38 | * `NavbarHeading` (aliased as `Navbar.Heading`)
|
| 39 | * `NavbarDivider` (aliased as `Navbar.Divider`)
|
| 40 |
|
| 41 | These components are simple containers for their children. Each of them supports
|
| 42 | the full range of HTML `<div>` props.
|
| 43 |
|
| 44 | ```tsx
|
| 45 | <Navbar>
|
| 46 | <Navbar.Group align={Alignment.LEFT}>
|
| 47 | <Navbar.Heading>Blueprint</Navbar.Heading>
|
| 48 | <Navbar.Divider />
|
| 49 | <Button className="@ns-minimal" icon="home" text="Home" />
|
| 50 | <Button className="@ns-minimal" icon="document" text="Files" />
|
| 51 | </Navbar.Group>
|
| 52 | </Navbar>
|
| 53 | ```
|
| 54 |
|
| 55 | @interface INavbarProps
|
| 56 |
|
| 57 | @interface INavbarGroupProps
|
| 58 |
|
| 59 | @interface INavbarHeadingProps
|
| 60 |
|
| 61 | @interface INavbarDividerProps
|
| 62 |
|
| 63 | @## CSS
|
| 64 |
|
| 65 | Use the following classes to construct a navbar:
|
| 66 |
|
| 67 | * `nav.@ns-navbar` – The parent element. Use a `<nav>` element for accessibility.
|
| 68 | * `.@ns-navbar-group.@ns-align-(left|right)` – Left- or right-aligned group.
|
| 69 | * `.@ns-navbar-heading` – Larger text for your application title.
|
| 70 | * `.@ns-navbar-divider` – Thin vertical line that can be placed between groups of elements.
|
| 71 |
|
| 72 | @css navbar
|