Top Bar Layout

Top Bar Layout provides a clean and consistent structure for your web pages. It features a fixed top navigation bar, a dynamic main content area, and a footer section — all styled with Tailwind CSS and optimized for Next.js and React.js projects.

This layout ensures a seamless and user-friendly navigation experience across your website.

Top Bar Layout preview

1. Setup codes

Before setup the Top Bar Layout, please setup some commons components:

• TopBar component
• Footer component

Create a new file components/layouts/TopBarLayout.tsx

jsx
import React, { ReactNode } from "react";

import Footer from "./common/Footer";
import TopBar from "./common/TopBar";

type TopBarLayoutProps = {
  children: ReactNode;
  haveFooter?: boolean;
};

/**
 * TopBar Layout with TopBar Navigation on top
 * Have footer at the end of page
 *
 * haveFooter: can show and hide the footer by this flag
 */
const TopBarLayout = ({ children, haveFooter = true }: TopBarLayoutProps) => {
  return (
    <div className="flex min-h-screen flex-col">
      <TopBar />
      <main className="flex-1">{children}</main>
      {haveFooter && <Footer />}
    </div>
  );
};

export default TopBarLayout;

2. Usages

Now you can use the TopBarLayout component in your pages app/page.tsx

jsx
import TopBarLayout from "@/components/layouts/TopBarLayout";

import HeroBanner from "@/components/sections/HeroBanner";
import MainFeatures from "@/components/sections/MainFeatures";
import FAQs from "@/components/sections/FAQs";
import ContactUs from "@/components/sections/ContactUs";

const HomePage = () => {
  return (
    <TopBarLayout>
      <HeroBanner />
      <MainFeatures />
      <FAQs />
      <ContactUs />
    </TopBarLayout>
  );
}

export default HomePage;

The UI like that

You can use TopBarLayout component in layout file (in Next.js), for example app/layout.tsx, app/admin/layout.tsx

jsx
import TopBarLayout from "@/components/layouts/TopBarLayout";

export default async function Layout({ children }: { children: React.ReactNode }) {
  return <TopBarLayout>{children}</TopBarLayout>;
}

And then, any pages inside this layout have the same Top bar layout.