January 1, 2024 · 1 min read

Navigation

Navigation components
navigation.webp

See: Material Design 3 - Components

App bars
Bottom app bars
No FAB
With FAB
Top app bars
Center-aligned
Title
Small
Title
Medium
Title
Large
Title
Navigations
Navigation bars
home
Home
folder
Folder
note
Note
token
Token
settings
Settings
Subcomponents
stars
Label
stars
Label
stars
Label
stars
Label
stars
8
Label
stars
8
Label
Navigation drawers
Standard
Headline
home
Home
folder
Folder
note
Note
Section header
token
Token
settings
Settings
Headline
Home
Folder
Note
Section header
Token
Settings
Modal
Headline
home
Home
folder
Folder
note
Note
Section header
token
Token
settings
Settings
Headline
Home
Folder
Note
Section header
Token
Settings
Subcomponents
Headline
Section header
stars
Label
100+
stars
Label
100+
Navigation rails
Align - top / middle / bottom
home
Home
folder
Folder
note
Note
token
Token
home
Home
folder
Folder
note
Note
token
Token
home
Home
folder
Folder
note
Note
token
Token
Subcomponents
stars
Label
stars
Label
stars
Label
stars
Label
stars
8
Label
stars
8
Label
stars
stars
stars
stars
stars
8
stars
8
Searches
Search bar
menu
search
menu
search
A
Search view - modal
arrow_back
close
arrow_back
close
home
Home
folder
Folder
note
Note
token
Token
Search view - full-screen
arrow_back
close
arrow_back
close
home
Home
folder
Folder
note
Note
token
Token
Tabs
Primary
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
add add add add add
add
Tab 1
add
Tab 2
add
Tab 3
add
Tab 4
add
Tab 5
Secondary
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
add
Tab 1
add
Tab 2
add
Tab 3
add
Tab 4
add
Tab 5
Subcomponents
Primary
Primary
Active
add
add
add
Icon & label
add
Active
Secondary
Secondary
Active
add
Icon & label
add
Active