Navigation Bar Responsive

This tailwind example is contributed by SAI BENDE, on 06-Jan-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Navbar

Author SAI BENDE

Tailwind v3.4 11.2k 12

Fork Fullscreen

<nav class="bg-black p-4">
    <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
        <div class="text-white font-bold text-3xl mb-4 lg:mb-0 hover:text-orange-600 hover:cursor-pointer">Porfolio
        </div>

<div class="lg:flex flex-col lg:flex-row lg:space-x-4 lg:mt-0 mt-4 flex flex-col items-center text-xl">
            <a href="/" class="text-white  px-4 py-2 hover:text-orange-600 ">Home</a>
            <a href="#Projects" class="text-white  px-4 py-2  hover:text-orange-600">Projects</a>
            <a href="/" class="text-white  px-4 py-2  hover:text-orange-600">About</a>
            <a href="/" class="text-white  px-4 py-2  hover:text-orange-600">Contact Me</a>
        </div>
    </div>

</nav>

<!-- function App() {
    const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {
        setIsOpen(!isOpen);
    };

return (
        <div>
            {/* Navbar */}
            <nav className="bg-black p-4">
                <div className="container mx-auto flex flex-col lg:flex-row justify-between items-center">
                    <div className="text-white font-bold text-3xl mb-4 lg:mb-0 hover:text-orange-600 hover:cursor-pointer">Porfolio </div>

{/* Hamburger menu for small screens */}
                    <div className="lg:hidden">
                        <button onClick={toggleMenu} className="text-white focus:outline-none">
                            <svg
                                className="h-6 w-6"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M4 6h16M4 12h16m-7 6h7"
                                ></path>
                            </svg>
                        </button>
                    </div>

{/* Navigation links */}
                    <div className={`lg:flex flex-col lg:flex-row ${isOpen ? 'block' : 'hidden'} lg:space-x-4 lg:mt-0 mt-4 flex flex-col items-center text-xl`}>
                        <a href="/" className="text-white  px-4 py-2 hover:text-orange-600 ">Home</a>
                        <a href="#Projects" className="text-white  px-4 py-2  hover:text-orange-600">Projects</a>
                        <a href="/" className="text-white  px-4 py-2  hover:text-orange-600">About</a>
                        <a href="/" className="text-white  px-4 py-2  hover:text-orange-600">Contact Me</a>
                    </div>
                </div>
                
            </nav>

</div>
    );
}

export default App; -->

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.9k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.5k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

3 years ago

28.9k
page heaading stacked
yeah booy, oh booy, o buy

Anonymous

2 years ago

10.8k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k
Very simple navbar

Arya

3 years ago

15k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
Full width header with gradient
Header component for showing Info.

TailwindFlex

4 years ago

14.2k
Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
Resume template for tech field
IT industry resume layout

Nishant Trivedi

3 years ago

10.6k
Semi transparent navbar

Laurits

3 years ago

16.7k
Navbar
Navbar for primary menu

Anonymous

2 years ago

6.9k