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

8.9k

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

34.2k
Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

21.1k
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

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

Author:
Anonymous

1 year ago

9k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

57.8k
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

14.8k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

16.1k
Very simple navbar

Author:
Arya

2 years ago

12.7k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.7k
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

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

Author:
TailwindFlex

2 years ago

12.8k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

11.7k
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

1 year ago

9k
Semi transparent navbar

Author:
Laurits

2 years ago

14.9k
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

4.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components