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

10.2k

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

3 years ago

38.5k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

23.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.

Author:
Eamon Carter

2 years ago

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

Author:
Anonymous

2 years ago

10.3k
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

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

2 years ago

16.2k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17.2k
Very simple navbar

Author:
Arya

3 years ago

14.4k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

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

Author:
Junclarkaizen Pagu

2 years ago

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

Author:
TailwindFlex

3 years ago

13.5k
Promotional sticky top section

Author:
Leon Bachmann

3 years ago

12.8k
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

2 years ago

10k
Semi transparent navbar

Author:
Laurits

3 years ago

16.1k
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

6.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components