Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.
A Date Picker lets users select a date or range of dates. It uses a text field and a visual calendar in a popover. They might include a single date or a date range.
When to use
- Used when you have to ask the user for a time or date, or for scheduling tasks.
- When the date to be selected will be within a year of the default date.
- Date field: Indicates the date which lies in that month. Additionally accompanies by an event dot.
- Range start/end: Optionally start a selection with several dates in a range.
- Selection: Visually shows the dates which lies between the start/end range.
- Choose good defaults, such as the current date, end of financial year, end of calendar year, or according to some other schedule.
- Clearly show the month and year on the top header added with a way to navigate between months and dates.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.