Request for Addition of Side Navigation Menu with Icons

[portal7]

Hello Shadcn Team, I would like to request the addition of a Side Navigation Menu with Icons to enhance the user experience and navigation in the project. This feature would significantly improve the accessibility and usability of the platform.

Details:

• Feature: Side Navigation Menu
• Benefit: Improved navigation and accessibility
• Icon: Icons for each menu item
• Purpose: Enhance user experience

Implementing this feature would make the Shadcn project more user-friendly and visually appealing. Looking forward to your consideration.

Thank you

[portal7]

Anyone? No one is interested?

[lacymorrow]

I believe this is a duplicate of #667 .

For what it's worth, I build my own mostly but the best suggestions were:

• The example music app (used in one of my own apps): https://ui.shadcn.com/examples/music
• This guys' example app (collapsible, basically what I built, but simpler): https://github.com/gaofubin/t3-app-template/tree/main
• This tailwind solution: https://play.tailwindcss.com/7Qt66m0U5q?layout=preview
• Taxonomy solution: https://github.com/shadcn-ui/taxonomy/blob/main/components/sidebar-nav.tsx

[gaofubin]

@portal7 This is the admin template I designed, which contains sidebar and mobile sidebar. I hope it can help you. Git repo: https://github.com/gaofubin/t3-app-template/tree/main Demo address: t3-app-template.vercel.app light:

dark:

[lacymorrow]

@gaofubin I mentioned yours in the post, and in fact used your code a bit to create my own, similar. some tweaks to addtext-overflow: ellipsis; basically.

https://github.com/shadcn-ui/ui/assets/1311301/32a765f4-9658-4457-94ac-6bdb6c6da5b5

[gaofubin]

@lacymorrow Hi, thank you for using it. I would like to ask if you can help me change the hover of the secondary menu to display a submenu. If so, you can help me raise a PR. Thank you.

[lacymorrow]

I may not be of much help as I’m spread a little thin at the moment, but could you describe what you want in a little more detail?

[JRebertt]

@lacymorrow I think you guy should totally release this model to us, it's just awesome

[lacymorrow]

Archive.zip Here is my tweaked version of @gaofubin 's component.

export const nav: NavItem[] = [
  {
    title: "Home",
    icon: LightningBoltIcon,
    href: '/',
    color: "text-sky-500",
  },
  {
    title: "Programs",
    icon: Building2Icon,
    href: '/programs',
    color: "text-sky-500",
  },
  {
    title: "Sites",
    icon: BuildingIcon,
    href: 'sites',
    color: "text-green-500",
    items: [
      {
        title: "Systems",
        icon: ActivityIcon,
        color: "text-pink-500",
        href: '/sites/systems',
      },
    ],
  },
];

[ceedadev]

hi all, shad just released new components. Under new Mail example, it has a killer sidenavbar.

[lacymorrow]

That's sick!

This can be closed most likely.

[ArielMejiaDev]

The Mail example has a great side navbar example, here is the code to find it:

• Used here
• The Nav component here

[elijaholmos]

How could I make this sidebar nav stay fixed on the left side of the screen while I scroll through my main page content? I tried adding the fixed, sticky, etc position properties and it didn't really work.

in particular, it caused the <ResizableHandle /> component to disappear

[lacymorrow]

Think about the way your content is structured. The reason the handle disappeared is likely because it was stretched down the page to 50% the height of your content. If using the resizable panels, they must stay at 100vh (max). You need a child element to scroll, rather than the resizable panel.

I've been able to accomplish this using the scrollarea component, but there are bugs that make it very difficult. I recommend using a regular div with a height+overflow auto