# Carrd Dropdown Menu ## Add dropdown navigation to a Carrd site without turning the menu into clutter. A Carrd dropdown menu is useful when your page has grouped links that should not all sit in the top-level navbar. Instead of showing every service, resource, example, or product detail as a separate top-level link, you can group related items under one dropdown label. Earlybyte Navbar supports two-level Carrd dropdown navigation, mobile-friendly menu behavior, and Carrd-ready embed export. ## When to use a dropdown Use a dropdown when it makes the navigation easier to scan. Good dropdowns group related links under a clear parent label. Bad dropdowns hide important links or add complexity to a page that does not need it. For many Carrd sites, one dropdown is enough. A SaaS page might use a Resources dropdown. An agency page might use a Services dropdown. A creator page might use a Links dropdown. A good rule of thumb: reach for a Carrd dropdown menu once your top navigation grows past five or six links, or when several links clearly belong to the same theme. A two-level dropdown keeps the header short while still giving visitors a full map of the site. Anything deeper than two levels usually signals that the page is trying to do too much, and a flat menu or a dedicated section would serve visitors better. ## Good dropdown examples ### Services dropdown - Strategy - Design - Development - Support ### Resources dropdown - Docs - Examples - FAQ - Changelog ### Product dropdown - Features - Use Cases - Integrations - Pricing ## Dropdowns on mobile Dropdown menus need extra care on phones. A desktop hover-style menu is not enough because mobile visitors tap instead of hover. The mobile version should keep labels readable, links easy to tap, and grouped items clear. The builder previews mobile navigation so you can check whether the dropdown still makes sense at phone width. If the mobile menu becomes too long, reduce the number of links or simplify the structure. On mobile, a dropdown usually works best as a tap-to-expand group inside the open menu rather than a hover flyout. That keeps every child link reachable with a thumb and avoids menus that open off the edge of a small screen. Previewing the exact tap behavior before you export means you catch cramped spacing and hard-to-reach links while the navbar is still easy to change. ## Common dropdown mistakes ### Using vague parent labels Labels like More or Menu can work, but specific labels are usually clearer. Services, Product, Resources, and Examples tell visitors what they will find. ### Hiding important links If Pricing or Contact is the main action, do not hide it deep inside a dropdown. Important conversion links usually deserve top-level placement. ### Adding too many child links A dropdown with ten links can feel like a second website navigation system. Keep dropdown groups focused. ### Forgetting Carrd section targets Dropdown links that point to Carrd sections still need accurate hash targets such as `#features`, `#pricing`, or `#contact`. With Earlybyte Navbar, you can add top-level links, turn a link into a dropdown, add child items, preview desktop behavior, check the mobile menu, and export the final Carrd embed code. The result is still a lightweight Carrd navigation snippet, but the editing workflow is much calmer than changing dropdown markup and JavaScript manually.