Home
SAI BENDE
Navigation Bar Responsive

Navigation Bar Responsive

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

Navbar

Author SAI BENDE

7.4k

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

Author:
Piet Vriend

2 years ago

29.7k
Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

18.3k
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.

Author:
Eamon Carter

1 year ago

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

Author:
Anonymous

1 year ago

7.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

51.5k
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.

Author:
Mamadou Diouma II Bah

1 year ago

12.5k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

14.6k
Very simple navbar

Author:
Arya

1 year ago

11.3k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

9 months ago

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

Author:
Junclarkaizen Pagu

1 year ago

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

Author:
TailwindFlex

2 years ago

12k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

10.3k
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

1 year ago

8.1k
Semi transparent navbar

Author:
Laurits

1 year ago

13.1k
Navbar
Navbar for primary menu

Author:
Anonymous

8 months ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components