- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
- Contributing
- Localisation
Navigation bar
The navigation bar component encapsulates a title and icon/text actions for controlling views.
Default
With text button
The navigation bar can be composed with text buttons.
With icon button
The navigation bar can be composed with different icon buttons.
With a custom title element
The title can include elements other than text.
Sticky
bpk-component-navigation-bar
Backpack navigation bar component.
Installation
Check the main Readme for a complete installation guide.
Usage
BpkNavigationBar
import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
export default () => (
<BpkNavigationBar
title="Backpack"
leadingButton={
<BpkNavigationBarIconButton
onClick={() => {}}
icon={ArrowIconWithRtl}
label="back"
/>
}
trailingButton={
<BpkNavigationBarButtonLink onClick={() => {}}>Done</BpkNavigationBarButtonLink>
}
/>
)
BpkNavigationBarIconButton
import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
export default () => (
<BpkNavigationBarIconButton
onClick={() => {}}
icon={ArrowIcon}
label="back"
/>
)
BpkNavigationBarButtonLink
import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
export default () => (
<BpkNavigationBarButtonLink onClick={() => {}}>
Done
</BpkNavigationBarButtonLink>
)
Props
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 2, 2023, 15:59