Sidebar

A vertical bar that can be used to navigate between pages.
Overview
Analytics
Database
Settings
Properties
Hide Logo
Logo Image
Update image
Example
Source Code
Installation
"use client";

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

function SidebarExample() {
  return (
    <Sidebar
      hideLogo={false}
      logoImage="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
    >
      <Sidebar.Item selected={true}>Overview</Sidebar.Item>
      <Sidebar.Item icon="FeatherBarChart">Analytics</Sidebar.Item>
      <Sidebar.Item icon="FeatherDatabase">Database</Sidebar.Item>
      <Sidebar.Item icon="FeatherSettings">Settings</Sidebar.Item>
    </Sidebar>
  );
}

export default SidebarExample;

Props

Sidebar
Item
Prop
Type
Default
Additional info
children
React.ReactNode
hideLogo
boolean
false
logoImage
string
"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"

Examples

Selected

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