Top navigation

앱과 모바일 웹의 최상단에 위치하는 주요 탐색 요소입니다. 사용자가 서비스의 핵심 섹션과 기능에 빠르게 접근할 수 있도록 돕습니다.

Basic top navigation

애플리케이션과 웹에서 주요한 제어 영역을 구성할 때 사용합니다.

Top navigation

import {
  TopNavigation,
  TopNavigationButton,
} from '@wanteddev/wds';
import { IconChevronLeft, IconClose } from '@wanteddev/wds-icon';

const Demo = () => {
  return (
    <TopNavigation
      leadingContent={(
        <TopNavigationButton>
          <IconChevronLeft />
        </TopNavigationButton>
      )}
      trailingContent={(
        <TopNavigationButton>
          <IconClose />
        </TopNavigationButton>
      )}>
      Top navigation
    </TopNavigation>
  )
}

export default Demo;

Anatomy

TopNavigation 은 여러 컴포넌트를 조합해서 사용합니다.

기본 구성은 아래와 같습니다.

<TopNavigation
  leadingContent={<TopNavigationButton />}
  trailingContent={<TopNavigationButton />}
>
  Heading
</TopNavigation>

Variants

총 4가지 variant를 제공합니다.

  • normal
  • display
  • floating
  • search

Normal

Display

import {
  TopNavigation,
  TopNavigationButton,
  FlexBox,
  SearchField,
} from '@wanteddev/wds';
import { IconChevronLeft, IconClose } from '@wanteddev/wds-icon';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="20px" sx={{ width: '100%' }}>
      <TopNavigation
        leadingContent={(
          <TopNavigationButton variant="icon">
            <IconChevronLeft />
          </TopNavigationButton>
        )}
        trailingContent={(
          <TopNavigationButton variant="icon">
            <IconClose />
          </TopNavigationButton>
        )}
      >
        Normal
      </TopNavigation>

      <TopNavigation
        variant="display"
        trailingContent={(
          <TopNavigationButton variant="icon">
            <IconClose />
          </TopNavigationButton>
        )}
      >
        Display
      </TopNavigation>

      <FlexBox sx={{ height: 60 }}>
        <TopNavigation
          variant="floating"
          leadingContent={(
            <TopNavigationButton variant="icon">
              <IconChevronLeft />
            </TopNavigationButton>
          )}
          trailingContent={(
            <TopNavigationButton variant="icon">
              <IconClose />
            </TopNavigationButton>
          )}
        />
      </FlexBox>

      <TopNavigation
        variant="search"
        leadingContent={(
          <TopNavigationButton variant="icon">
            <IconChevronLeft />
          </TopNavigationButton>
        )}
        trailingContent={(
          <TopNavigationButton variant="icon">
            <IconClose />
          </TopNavigationButton>
        )}
      >
        <SearchField size="small" placeholder="Search" />
      </TopNavigation>
    </FlexBox>
  )
}

export default Demo;

Background

background prop 을 사용하여 배경 색을 제어할 수 있습니다.

floating variant 일 경우 gradient 효과가 적용됩니다.

Normal

Display

import {
TopNavigation,
TopNavigationButton,
FlexBox,
SearchField,
} from '@wanteddev/wds';
import { IconChevronLeft, IconClose } from '@wanteddev/wds-icon';

const Demo = () => {
return (
  <FlexBox flexDirection="column" gap="20px" sx={{ width: '100%' }}>
    <TopNavigation
      leadingContent={(
        <TopNavigationButton variant="icon">
          <IconChevronLeft />
        </TopNavigationButton>
      )}
      trailingContent={(
        <TopNavigationButton variant="icon">
          <IconClose />
        </TopNavigationButton>
      )}
    >
      Normal
    </TopNavigation>

    <TopNavigation
      variant="display"
      trailingContent={(
        <TopNavigationButton variant="icon">
          <IconClose />
        </TopNavigationButton>
      )}
    >
      Display
    </TopNavigation>

    <FlexBox sx={{ height: 60 }}>
      <TopNavigation
        variant="floating"
        leadingContent={(
          <TopNavigationButton variant="icon">
            <IconChevronLeft />
          </TopNavigationButton>
        )}
        trailingContent={(
          <TopNavigationButton variant="icon">
            <IconClose />
          </TopNavigationButton>
        )}
      />
    </FlexBox>

    <TopNavigation
      variant="search"
      leadingContent={(
        <TopNavigationButton variant="icon">
          <IconChevronLeft />
        </TopNavigationButton>
      )}
      trailingContent={(
        <TopNavigationButton variant="icon">
          <IconClose />
        </TopNavigationButton>
      )}
    >
      <SearchField size="small" placeholder="Search" />
    </TopNavigation>
  </FlexBox>
)
}

export default Demo;

With text type button

TopNavigationButton 의 variant 를 text 로 설정하면 텍스트 타입의 버튼을 사용할 수 있습니다.

color prop 을 사용하여 버튼의 색상을 제어할 수 있습니다.

Normal

Display

import {
  TopNavigation,
  TopNavigationButton,
  FlexBox,
  SearchField,
} from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="20px" sx={{ width: '100%' }}>
      <TopNavigation
        leadingContent={(
          <TopNavigationButton variant="text">
            뒤로
          </TopNavigationButton>
        )}
        trailingContent={(
          <TopNavigationButton variant="text" color="primary">
            완료
          </TopNavigationButton>
        )}
      >
        Normal
      </TopNavigation>

      <TopNavigation
        variant="display"
        trailingContent={(
          <TopNavigationButton variant="text" color="primary">
            완료
          </TopNavigationButton>
        )}
      >
        Display
      </TopNavigation>

      <FlexBox sx={{ height: 72, position: 'relative' }}>
        <TopNavigation
          variant="floating"
          leadingContent={(
            <TopNavigationButton variant="text">
              뒤로
            </TopNavigationButton>
          )}
          trailingContent={(
            <TopNavigationButton variant="text" color="primary">
              완료
            </TopNavigationButton>
          )}
        />
      </FlexBox>

      <TopNavigation
        variant="search"
        leadingContent={(
          <TopNavigationButton variant="text">
            뒤로
          </TopNavigationButton>
        )}
        trailingContent={(
          <TopNavigationButton variant="text" color="primary">
            완료
          </TopNavigationButton>
        )}
      >
        <SearchField size="small" placeholder="Search" />
      </TopNavigation>
    </FlexBox>
  )
}

export default Demo;

With toolbar

Toolbar

Tab 컴포넌트 등과 함께 조합할 수 있습니다.

Background blur 효과를 함께 적용하기 위해 사용합니다.

Normal

import {
  TopNavigation,
  TopNavigationButton,
  Tab,
  TabList,
  TabListItem,
} from '@wanteddev/wds';

const Demo = () => {
  return (
    <Tab defaultValue="">
      <TopNavigation toolbar={(
        <TabList horizontalPadding size="small">
          <TabListItem value="">Tab 1</TabListItem>
          <TabListItem value="1">Tab 2</TabListItem>
        </TabList>
      )}>
        Normal
      </TopNavigation>
    </Tab>
  )
}

export default Demo;

API

TopNavigation

NameTypesdefaultValue
variant
"search" | "display" | "normal" | "floating"
"normal"
trailingContent
ReactNode
-
leadingContent
ReactNode
-
toolbar
ReactNode
-
background
boolean
true
titleId
string
-
children
ReactNode
-
xl
{ sx?: CSSInterpolation; } | undefined
-
lg
{ sx?: CSSInterpolation; } | undefined
-
md
{ sx?: CSSInterpolation; } | undefined
-
sm
{ sx?: CSSInterpolation; } | undefined
-
xs
{ sx?: CSSInterpolation; } | undefined
-
sx
SxProp
-

TopNavigationButton

NameTypesdefaultValue
as
ElementType
-
variant
"text" | "icon"
"icon"
color
"primary" | "assistive"
"assistive"
disabled
boolean
-
size
number | "small" | "medium"
-
children
ReactNode
-
sx
SxProp
-

© 2026 Wanted Lab, Inc.