Bottom Navigation
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Bottom Navigation component is used to enable easy navigation within an app or to clarify which page you are on.
1. Reference
This component inherits props from the Bottom Navigation.
-
2. Count
You can edit the count with the 2, 3, 4 or 5 parameter.
Image 2.1 : Count 2
Image 2.2 : Count 3
Image 2.3 : Count 4
Image 2.4 : Count 5
3. Label
You can edit the label with the true or false parameter.
Image 3.1 : Label true
Image 3.2 : Label false
4. Badge
You can edit the badge with the none, sm or md parameter.
Image 4.1 : Badge none
Image 4.2 : Badge sm
Image 4.3 : Badge md
SwiftUI
The DLBottomNavigation component is used to enable easy navigation within an app or to clarify which page you are on.
1. Reference
This component inherits props from the Bottom Navigation.
-
-
-
2. Icon
You can edit the icon with the "icon" parameter.
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
)
]
DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)
3. Label
You can edit the label with the "text" parameter.
let items: [DLBottomItem] = [
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
)
]
DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)
4. badgeSize
You can edit the badgeSize with the .sm or .md(text: String) parameter.
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .sm
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .md(text: "2")
)
]
DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)
Jetpack Compose
The BottomNavigation component is used to enable easy navigation within an app or to clarify which page you are on.
1. Reference
This component inherits props from the Bottom Navigation.
-
-
-
2. Icon
You can edit the icon with the "icon" parameter.
3. Label
You can edit the label with the "text" parameter.
4. badgeSize
You can edit the badgeSize with the .sm or .md(text: String) parameter.
React Native
The CustomBottomNavigation component is used to enable easy navigation within an app or to clarify which page you are on.
1. Reference
This component inherits props from the Bottom Navigation.
-
-
2. Icon
You can edit the icon with the "icon" parameter.
import CustomBottomNavigation from '../../components/navigation/CustomBottomNavigation';
export default function ScreenName() {
const screens = [
{
name: 'Label-1',
component: HomeScreen,
icon: TemplatesIcon,
notifications: 0,
},
{
name: 'Label-2',
component: ProfileScreen,
icon: TemplatesIcon,
notifications: 2,
},
{
name:'Label-3',
component: ProfileScreen,
icon: TemplatesIcon,
notifications: 5,
},
];
return (
<CustomBottomNavigation
badge="none"
screens={screens}
/>
<CustomBottomNavigation
badge="sm"
screens={screens}
/>
<CustomBottomNavigation
badge="md"
screens={screens}
/>
);
}
3. Label
You can edit the label with the "text" parameter.
4. badgeSize
You can edit the badgeSize with the .sm or .md(text: String) parameter.
Discover more content
You have questions or need help?
You want to try?
Save time and money?