Monospace 헬스케어 내비게이션
헬스케어/의료 애플리케이션을 위한 복잡하고 반응이 빠른 내비게이션 구성 요소로, 따뜻한 중립색, 다크 모드 지원 및 대화형 요소가 있는 모노스페이스/개발자에서 영감을 받은 디자인을 특징으로 합니다.
HTML 코드
<nav class="bg-neutral-100 p-4 font-mono text-neutral-800 shadow-md dark:bg-neutral-900 dark:text-neutral-200">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<!-- Brand/Logo (Left) -->
<a href="#" class="flex items-center text-xl font-bold tracking-tight text-amber-700 dark:text-amber-500">
<svg class="mr-2 h-6 w-6 stroke-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 16L14 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="hidden md:inline">Med OS</span><span class="inline md:hidden">MOS</span>
</a>
<!-- Mobile Menu Button (Hamburger) -->
<button class="peer block rounded p-2 text-neutral-600 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:text-neutral-300 md:hidden" aria-label="Toggle navigation">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- Navigation Links Container -->
<div class="w-full flex-grow pb-4 md:flex md:w-auto md:items-center md:pb-0 peer-focus:block hidden">
<ul class="flex flex-col md:ml-auto md:flex-row">
<li><a href="#dashboard" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Dashboard</a></li>
<li class="group relative">
<a href="#patients" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center" aria-haspopup="true" aria-expanded="false">Patients
<span class="ml-1 inline-block transition-transform duration-200 group-hover:rotate-180 md:hidden sm:inline-block md:group-hover:rotate-180">
<svg class="h-4 w-4 fill-current" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
</span>
</a>
<!-- Dropdown Menu -->
<ul class="hidden md:group-hover:block md:absolute md:top-full md:left-1/2 md:-translate-x-1/2 md:mt-0 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-b-md md:z-10 group-focus-within:block">
<li><a href="#add-patient" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">+ Add New</a></li>
<li><a href="#patient-list" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">View All</a></li>
<li><a href="#reports" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Reports</a></li>
</ul>
</li>
<li><a href="#appointments" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Appointments</a></li>
<li><a href="#billing" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Billing</a></li>
<li><a href="#settings" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Settings</a></li>
</ul>
</div>
<!-- User Avatar & Actions (Right) -->
<div class="flex items-center space-x-4 ml-auto -mr-2 md:mr-0">
<!-- Search Icon (for desktop) -->
<button class="hidden md:block p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Search">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
<!-- Notifications Icon -->
<button class="relative p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Notifications">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute right-1 top-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"></span>
</button>
<!-- User Avatar with Dropdown -->
<div class="group relative">
<button class="flex items-center space-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500" aria-haspopup="true" aria-expanded="false">
<img class="h-8 w-8 rounded-full border-2 border-amber-700 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<span class="hidden text-neutral-800 dark:text-neutral-200 md:inline">Dr. Anya S.</span>
<svg class="h-4 w-4 fill-current text-neutral-600 dark:text-neutral-300 md:inline-block transition-transform duration-200 group-hover:rotate-180" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
</button>
<!-- User Dropdown Menu -->
<ul class="hidden md:group-hover:block md:absolute md:top-full md:right-0 md:mt-2 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-md md:z-20 md:min-w-[10rem] group-focus-within:block">
<li><a href="#profile" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Profile</a></li>
<li><a href="#messages" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Messages</a></li>
<li><hr class="my-1 border-neutral-300 dark:border-neutral-700"></li>
<li><a href="#logout" class="block px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">Sign Out</a></li>
</ul>
</div>
</div>
</div>
</nav>관련 구성 요소
소셜 미디어 탐색 구성 요소
소셜 미디어 인터페이스용으로 설계된 반응형 탐색 구성 요소로, Tailwind CSS와 함께 어두운 테마를 사용하여 머티리얼 디자인 미학을 특징으로 합니다.
Navigation 구성 요소
블로그/콘텐츠 소비를 위해 설계된 반응형 탐색 구성 요소로, 3D 디자인 스타일, 보색 구성표 및 일부 대화형 기능을 통합한 중간 정도의 복잡성을 제공합니다.
미니멀리스트 보석 톤 음식/레스토랑 내비게이션
음식 및 레스토랑 웹사이트를 위한 미니멀하고 반응이 빠른 탐색 구성 요소로, 보석 톤, 다크 모드 지원 및 깔끔하고 평평한 디자인을 특징으로 합니다. 로고, 탐색 링크, 클릭 유도문안 버튼이 포함되어 있으며 모바일 친화적인 햄버거 메뉴가 있습니다.