While building a navigation bar in my Next.js project, I wanted to include a vertical separator between the site name and navigation links:
import React from "react"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"
import { NavItem } from "@/components/nav-item"
import { UserAccountNav } from "@/components/user-account-nav"
type NavItemType = {
title: string
href: string
}
type MainNavProps = {
items: NavItemType[]
}
export function MainNav({ items }: MainNavProps) {
return (
<div className="flex h-14 items-center justify-between px-4">
<div className="flex items-center">
<Link
href="/"
className="text-secondary-foreground font-semibold tracking-tight"
>
Tusar Palauri
</Link>
<Separator orientation="vertical" className="mx-4" />
<nav>
<ul className="flex space-x-6">
{items.map((item) => (
<li key={item.title} className="active:scale-95">
<NavItem title={item.title} href={item.href} />
</li>
))}
</ul>
</nav>
</div>
<UserAccountNav />
</div>
)
}However, the vertical separator didn’t appear on the page:
After some investigation, I discovered that Shadcn UI's vertical separators require their parent container to have a defined height in order to render properly.
In my case, the container holding the site name, separator, and navigation items had classes flex and items-center, but no defined height. The solution was to add a height(h-6 in my case) to the container:
import React from "react"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"
import { NavItem } from "@/components/nav-item"
import { UserAccountNav } from "@/components/user-account-nav"
type NavItemType = {
title: string
href: string
}
type MainNavProps = {
items: NavItemType[]
}
export function MainNav({ items }: MainNavProps) {
return (
<div className="flex h-14 items-center justify-between px-4">
<div className="flex h-6 items-center">
<Link
href="/"
className="text-secondary-foreground font-semibold tracking-tight"
>
Tusar Palauri
</Link>
<Separator orientation="vertical" className="mx-4" />
<nav>
<ul className="flex space-x-6">
{items.map((item) => (
<li key={item.title} className="active:scale-95">
<NavItem title={item.title} href={item.href} />
</li>
))}
</ul>
</nav>
</div>
<UserAccountNav />
</div>
)
}Now the separator rendered correctly and became visible on the page:
