PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Navbar#

Navbar is a layout container that appears in the header of apps and websites.

SPECTRE.CSS Docs GitHub

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the `navbar-section` class will be evenly distributed in the container.

    <header class="navbar">
      <section class="navbar-section">
        <a href="..." class="navbar-brand mr-2">Spectre.css</a>
        <a href="..." class="btn btn-link">Docs</a>
        <a href="..." class="btn btn-link">GitHub</a>
      </section>
      <section class="navbar-section">
        <div class="input-group input-inline">
          <input class="form-input" type="text" placeholder="search">
          <button class="btn btn-primary input-group-btn">Search</button>
        </div>
      </section>
    </header>

You can use `navbar-center` class to have a centered section.

Docs Examples
Twitter GitHub

    <header class="navbar">
      <section class="navbar-section">
        <a href="#" class="btn btn-link">Docs</a>
        <a href="#" class="btn btn-link">Examples</a>
      </section>
      <section class="navbar-center">
        <!-- centered logo or brand -->
      </section>
      <section class="navbar-section">
        <a href="#" class="btn btn-link">Twitter</a>
        <a href="#" class="btn btn-link">GitHub</a>
      </section>
    </header>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.