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 file uploader is commonly found in forms, but can also live as a standalone element. There are two variants of file uploaders — a default file uploader and a drag and drop file uploader.
When to use
- Uploading one or more files.
- Uploading files by dragging and dropping.
- Showing the process of uploading.
- Do not use upload in a modal when multiple files are uploaded, as uploaded files stack vertically.
- Leading Icon: For showing the file type, or any supporting icon.
- File Details and Progress Bar: Shows the file name, size and an optional progress bar.
- Cancel Icon: Optionally add a cancel file upload icon to dismiss the process.
- Labels inform users what needs to be uploaded. Keep the label short and concise by limiting it to a single line of text.
- Descriptions help communicate to the user what file size or format limitations there are.
- Drop zone area text should describe that you can either drag and drop a file into the drop zone or click on the text to upload a file.
- Include the name, type and size of the file uploaded along with a progress bar when the file is being uploaded.
- Use an ellipsis (…) if the filename extends beyond the width of its parent element.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.