Navbar

Documentation for the <Navbar /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn

yarn add @exponentialeducation/betomic

Basic Example#

Navbars are built using the Navbar and Navbar.Brand components.

{/* ... */}

import { Navbar } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Navbar>
        Default navbar
      </Navbar>

      {/* ... */}
    </main>
  )
}

With shadow#

You can add a shadow style, passing shadow prop:

{/* ... */}

import { Navbar } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Navbar shadow>
        Default navbar
      </Navbar>

      {/* ... */}
    </main>
  )
}

Brand#

If you want to render a BEDU logo, you can use a Navbar.Brand component and add it inside.

{/* ... */}

import { Navbar } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Navbar shadow>
        <Navbar.Brand>
          <svg />
        </Navbar.Brand>
      </Navbar>

      {/* ... */}
    </main>
  )
}

Change background#

If you want to change the background styles you should pass a valid classes.

{/* ... */}

import { Navbar } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Navbar className="bg-surface-800">
        <Navbar.Brand>
          <svg />
        </Navbar.Brand>
      </Navbar>

      {/* ... */}
    </main>
  )
}

Size#

Two sizes are available.

{/* ... */}

import { Navbar } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Navbar size="sm" shadow>
        <Navbar.Brand>
          <svg />
        </Navbar.Brand>
      </Navbar>

      {/* ... */}
    </main>
  )
}

Props#

Navbar#

Main component

Navbar.Brand#