Navbar

A horizontal bar that can be used to navigate between pages.
Home
Analytics
Profile
Settings
Properties
Logo
Update image
Example
Source Code
Installation
"use client";

import React from "react";
import { Navbar } from "@/subframe/components/Navbar";

function NavbarExample() {
  return (
    <Navbar logo="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png">
      <Navbar.Item>Home</Navbar.Item>
      <Navbar.Item selected={true}>Analytics</Navbar.Item>
      <Navbar.Item>Profile</Navbar.Item>
      <Navbar.Item>Settings</Navbar.Item>
    </Navbar>
  );
}

export default NavbarExample;

Props

Navbar
Item
Prop
Type
Default
Additional info
children
React.ReactNode
logo
string
"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"

Examples

Selected

Use selected prop on the Navbar.Item a user is currently on.