메인 메뉴

메인 메뉴는 사용자가 서비스의 정보 구조를 탐색할 때, 가장 많이 사용하는 유형의 메뉴이다.

사용 지침

헤더 내부에 배치해 데스크톱에서는 가로 형태로, 모바일에서는 햄버거 버튼으로 펼쳐 보이도록 반응형으로 구성하고, 현재 위치를 시각적으로 강조해 사용자에게 컨텍스트를 제공합니다.

examples/main-menu/MainMenuDefault.tsx

import { MainMenu, MainMenuBar, MainMenuBarItem } from "@/components/ui/main-menu"

export default function MainMenuDefault() {

서비스

examples/main-menu/MainMenuWithPanel.tsx

import {
  MainMenu,
  MainMenuBar,

examples/main-menu/MainMenuMobileDefault.tsx

"use client"

import {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
style	CSSProperties	—	—
tabIndex	number	—	—