Top 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 Top Navigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.
1. Reference
This component inherits props from the Top Navigation.
2. Type
You can edit the type with the md or lg parameter.
Image 2.1 : Type md
Image 2.2 : Type lg
3. iconLeft
You can edit the iconLeft with the true or false parameter.
Image 3.1 : iconLeft false
Image 3.2 : iconLeft true
4. iconRight
You can edit the iconRight with the true or false parameter.
Image 4.1 : iconRight false
Image 4.2 : iconRight true
SwiftUI
The DLTopNavigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.
1. Reference
This component inherits props from the Top Navigation.
-
-
-
-
-
-
-
2. Size
You can edit the size with the .md or .lg parameter.
size: .md,
title: "Title",
iconLeft: "ic_Placeholder",
iconRight: "ic_Placeholder"
) {
/// - icon left action
} iconRightAction: {
/// - icon right action
}
DLTopNavigation(
size: .lg,
title: "Title",
iconLeft: "ic_Placeholder",
iconRight: "ic_Placeholder"
) {
/// - icon left action
} iconRightAction: {
/// - icon right action
}
Jetpack Compose
The TopNavigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.
1. Reference
This component inherits props from the Top Navigation.
-
-
-
-
-
-
-
2. Size
You can edit the size with the TopNavigationSize.md or TopNavigationSize.lg parameter.
title = "Title",
size = TopNavigationSize.lg,
iconLeft = TopNavigationIconType.Drawable(
drawable = R.drawable.ic_placeholder,
iconLeftAction = {}),
iconRight = TopNavigationIconType.Drawable(
drawable = R.drawable.ic_placeholder,
iconRightAction = {})
)
React Native
The CustomTopNavigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.
1. Reference
This component inherits props from the Top Navigation.
-
-
-
-
-
-
-
2. Size
You can edit the size with the md or lg parameter.
import placeholderIcon from '../../../assets/icons/svg_js/placeholderIcon';
import CustomTabNavigator from '../../components/navigation/CustomTabNavigator';
export default function ScreenName() {
return (
<CustomTopNavigation
size={md}
title={"Title"}
iconLeft={<BackIcon />}
iconRight={<CamIcon />}
iconLeftPress={() => console.log('Left Icon Pressed')}
iconRightPress={() => console.log('Right Icon Pressed')}
/>
<CustomTopNavigation
size={lg}
title={"Title"}
iconLeft={<BackIcon />}
iconRight={<CamIcon />}
iconLeftPress={() => console.log('Left Icon Pressed')}
iconRightPress={() => console.log('Right Icon Pressed')}
/>
);
}
3. Icon
You can edit the iconLeft and iconRight with the "icon" parameter.
import PlaceholderIcon from '../../../assets/icons/svg_js/placeholderIcon';
import CustomTabNavigator from '../../components/navigation/CustomTabNavigator';
export default function ScreenName() {
return (
<CustomTopNavigation
size={md}
title={"Title"}
iconLeft={<PlaceholderIcon />}
iconLeftPress={() => console.log('Left Icon Pressed')}
/>
<CustomTopNavigation
size={md}
title={"Title"}
iconRight={<PlaceholderIcon />}
iconRightPress={() => console.log('Right Icon Pressed')}
/>
);
}
Discover more content
You have questions or need help?
You want to try?
Save time and money?