Dashboard Topbar Layout

A complete dashboard layout with a top navigation bar, search functionality, user profile dropdown, and main content area.

Sometimes SaaS applications have only 1 or 2 pages or different scenarios where a sidebar isn't necessary. In these cases, a topbar-only navigation is sufficient for the application.

Remove Default Layout Files

Remove Sidebar Files

When implementing a topbar-only layout, you should remove these files:

components/layouts/dashboard/dashboard-sidebar.tsx
components/layouts/dashboard/sidebar-nav-items.tsx
components/layouts/dashboard/sidebar-upgrade-card.tsx
components/ui/sidebar.tsx
components/shared/command-manue.tsx
components/ui/command.tsx

Terminal

  npm uninstall cmdk

Dashboard Layout

app/dashboard/layout.tsx

import { DashboardTopNav } from "@/components/layouts/dashboard/dashboard-top-nav";
import { redirect } from "next/navigation";
import { appConfig } from "@/lib/app-config";
import { getCurrentUser } from "@/lib/session";
 
export default async function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const currentUser = await getCurrentUser();
  if (!currentUser) {
    redirect(appConfig.auth.login);
  }
  return (
    <div className="container mx-auto">
      <DashboardTopNav />
      <div className="flex flex-1 flex-col gap-4 pt-12 pb-4">{children}</div>
    </div>
  );
}

components/layouts/dashboard/dashboard-top-nav.tsx

import { ModeToggle } from "@/components/shared/mode-toggle";
import { TopNavUser } from "@/components/layouts/dashboard/top-nav-user";
import Logo from "@/components/ui/custom/logo";
 
export function DashboardTopNav() {
  return (
    <header className="sticky top-0 flex h-16 shrink-0 items-center justify-between transition-all duration-300 z-50 bg-background/60 backdrop-blur-sm">
      <div className="flex items-center">
        <Logo />
      </div>
      <div className="flex items-center gap-4">
        <ModeToggle />
        <TopNavUser />
      </div>
    </header>
  );
}

Tips

Use this layout when you need more horizontal space for content
Include a search bar for quick access to important features
Add notification icons for alerts and messages
Ensure the user profile dropdown includes account settings and logout
Consider adding breadcrumbs for deeper navigation structures

Remove Default Layout Files

Dashboard Layout

Top Navigation Bar

Tips

On this page