한국어
← All categories
02

Navigation

Few requests are as risky as "add a menu". Tabs, a dropdown, or a drawer — the choice changes how it is built, how it behaves on mobile, and what it costs.

16 terms16 live demos
Tabs and a tab bar are not the same thing

The names are close enough that this is where things get mixed up most. Tabs swap content inside one screen; a tab bar moves you between screens. A dropdown menu (navigate or run something) is also a different beast from a select (pick a value) — that one lives in category 04.

02

Tabs

탭

When this comes up

"Split it into Details / Reviews / Shipping" — dividing content inside one screen.

A control that swaps content within the same screen. Nothing navigates; the content changes in place.

See it Try clicking
Material, size and origin are shown here.

Try it. The address stays the same while only the content below changes.

Easy to get wrong

If pressing a tab navigates to another page, that is a menu, not a tab. Mixing the two makes developers build the wrong thing (swap content vs. load a page). Past five tabs, look at a different UI.

Using it on the job

Content hidden behind tabs may not be picked up by search engines. On pages where SEO matters, like product detail, consider stacking it vertically instead.

Ask for it like this

Split the product detail into tabs — Details / Reviews / Shipping & Returns. Swap content without navigating, and reflect the selected tab in the URL so it survives a refresh.

Related terms
03

Tab Bar

탭바 · 바텀 내비게이션

When this comes up

"Put a menu at the bottom like an app" — discussing main navigation on mobile web or apps.

The main menu fixed to the bottom of a mobile screen. Keeps three to five core features permanently within thumb reach.

See it Try clicking
The screen for the selected item appears here.
Easy to get wrong

Shares a name with "tabs" above but does a completely different job. Tabs swap content; a tab bar moves between screens. Keep it to five items at most.

Ask for it like this

Add a bottom tab bar on mobile. Four items — Home / Search / Saved / Profile — fixed to the bottom of the screen. Keep it clear of the safe area (home indicator).

Related terms
04

Hamburger Menu

햄버거 메뉴

When this comes up

"Use a hamburger on mobile" — deciding how the mobile menu behaves.

An icon of three stacked lines. Press it and a hidden menu appears.

See it Try clicking
Product name
Try pressing the hamburger icon.
Menu
Easy to get wrong

Hamburger is only the name of the icon; what opens is usually a drawer. Hiding the menu cuts discovery sharply, so think twice before hiding it on desktop too.

Using it on the job

Plenty of studies show that putting the word "Menu" beside the icon lifts the click rate. If there is room, use the word.

Ask for it like this

Below 767px, collapse the main navigation into a hamburger icon that opens a drawer from the left. Give the icon a screen-reader name ("Open menu"), and close the drawer on backdrop click and Esc.

Related terms
05

Drawer

드로어 · 사이드 메뉴

When this comes up

"Make it slide in from the side" — describing a panel that slides out like a drawer.

A panel that slides in from the edge of the screen. Named for the way a drawer opens.

See it Try clicking
My account

Pressing the dimmed area outside also closes it. Always write that behaviour into the spec.

Easy to get wrong

Hamburger icon → drawer opens is the usual pairing. So the hamburger is the button, the drawer is the thing that opens. Dim behind it and it is modal; do not and it is non-modal.

Ask for it like this

Build a drawer that slides in from the left. 280px wide, dimmed behind, closing on backdrop click and Esc. Lock scrolling on the page behind while it is open.

Related terms
07

Mega Menu

메가 메뉴

When this comes up

"I want to show every category at once" — on shopping and corporate sites.

A large multi-column menu that spreads across the full width when the GNB is hovered. Used on sites with a lot of categories.

See it Try clicking
New inBest sellers
WomenOuterwearTops
MenShirtsTrousers
AccessoriesBagsShoes
Easy to get wrong

Lots of items does not automatically mean a mega menu. It cannot carry over to mobile, so you have to design a second structure — which is more work.

Ask for it like this

Attach a mega menu to "All categories". Three columns, opening on <b>click as well as hover</b>. On mobile, replace it with an accordion inside the drawer.

Related terms
09

Pagination

페이지네이션 · 페이징

When this comes up

"How many should we show per page?" — a decision that always comes up when designing a list.

Splitting a list across numbered pages. You click 1, 2, 3… to move through it.

See it Try clicking
Easy to get wrong

Pagination suits services where people need to find "that item on page 4 again" — boards, admin screens. For content people browse, infinite scroll may be better.

Ask for it like this

Paginate the list at 20 per page. Reflect the current page in the URL so refresh and back both keep it.

Related terms
10

Load More

더보기 버튼

When this comes up

"Endless scrolling feels heavy, but I do not want page numbers either" — looking for the middle ground.

A button that appends the next batch below when pressed. Sits between pagination and infinite scroll.

See it Try clicking
Easy to get wrong

Unlike infinite scroll, people choose where to stop, and the footer stays reachable. Decide between the three during planning, not during build.

Ask for it like this

Show 20 items and put a "Load more" button at the bottom. Pressing it appends the next 20 below; hide the button when there is nothing left.

Related terms
11

Infinite Scroll

무한 스크롤

When this comes up

"Make it keep going like a social feed" — discussing feed-style products.

Automatically loading the next batch when scrolling reaches the bottom. Social feeds are the classic case.

See it Try clicking

Try scrolling down. The loading indicator keeps appearing at the bottom — you can never reach the footer.

Easy to get wrong

The footer becomes impossible to reach. That is fatal if company details and terms live only there. It also makes returning to "that item I saw earlier" hard.

Using it on the job

Move footer content into a sidebar or the header menu to sidestep it. And always ask for scroll position restore when someone goes into a detail page and comes back.

Ask for it like this

Make the feed infinite scroll. Keep footer information reachable from a separate menu, and restore the scroll position when returning from a detail page.

Related terms
12

Step Indicator

스텝 인디케이터 · 스텝퍼(진행)

When this comes up

"Show how many steps are left" — on multi-step flows like sign-up or checkout.

A display of which step you are on and how many remain in a multi-step process. Used in sign-up, ordering and payment.

See it Try clicking
✓
✓
3
4
CartShippingPaymentDone
Easy to get wrong

"Stepper" can also mean a numeric increment control (− 1 +). If you hear "add a stepper" in a meeting, always ask which one.

Ask for it like this

Add a four-step indicator to checkout — Cart / Shipping / Payment / Done. Check off completed steps and allow going back to an earlier one. (This is a progress indicator, not a numeric stepper.)

Related terms
14

Sticky · Fixed

스티키 · 픽스드 · 고정

When this comes up

"Pin this" — a request you must clarify.

Sticky sits in its normal place and attaches to the screen once scrolling reaches it. Fixed stays in the same place from the very start.

See it Try clicking
It sticks from here (sticky)

Scroll the area above. The blue bar attaches the moment it reaches the top.

Easy to get wrong

Korean calls both of them "고정", which is exactly why they get mixed up. Ask "is it floating from the start, or does it attach as you scroll?" and it resolves immediately.

Ask for it like this

Make this element sticky — it stays in place and attaches to the top of the screen once scrolling reaches it. Not fixed from the start.

Related terms
15

Floating Action Button

플로팅 버튼 · FAB

When this comes up

"Keep the compose button always visible" — when a key action should be reachable from anywhere.

A round button floating above the content, usually bottom-right, holding the single most important action on that screen.

See it Try clicking
Go to the compose screen
Easy to get wrong

FAB is a Material Design term. The rule is one per screen. Several of them and nothing reads as important. Always check whether it covers content at the bottom.

Ask for it like this

Add a compose FAB at the bottom right. 56px, with a screen-reader name on the icon, and enough bottom padding on the list so the last item is not covered.

Related terms
16

Kebab · Meatballs · Bento Menu

케밥 · 미트볼 · 벤토 메뉴

When this comes up

"When you press the three-dot icon…" — you need the name for each shape to point at the right one.

Names that liken icon shapes to food. Kebab is three vertical dots (⋮), meatballs three horizontal (⋯), bento a grid, and hamburger three horizontal lines (≡).

See it Try clicking
≡
Hamburger
⋮
Kebab
⋯
Meatballs
⠿
Bento

These are all names used in real design systems. A different shape means a different role.

Easy to get wrong

It sounds like a joke but these are the actual names used in design system documentation. Call it "the three-dot one" and nobody knows if you mean vertical or horizontal. Kebab is usually a per-item menu, meatballs a menu for the whole area.

Ask for it like this

Add a kebab menu (three vertical dots) to the right of each list item, opening an Edit / Delete dropdown. In the top toolbar, use a meatballs menu (three horizontal dots) for settings that apply to everything.

Related terms