Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed: Issue-1976 - Modified documentation, enhanced breadcrumb for… #2044

Merged
merged 1 commit into from
May 16, 2024
Merged

Changed: Issue-1976 - Modified documentation, enhanced breadcrumb for… #2044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions components/vf-breadcrumbs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
### 2.0.6

* Added: Changes for responsive breadcrumb [Tracking issue](https://github.com/visual-framework/vf-core/issues/2008)
* Updated: Enhanced `vf-breadcrumb` accessibility by increasing target area [Tracking issue](https://github.com/visual-framework/vf-core/issues/2009)
* Documentation: Updated usage guidelines for responsive [Tracking issue](https://github.com/visual-framework/vf-core/issues/2010)

### 2.0.5

* Documentation: Updated usage guidelines to show full navigation path
Expand Down
19 changes: 18 additions & 1 deletion components/vf-breadcrumbs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## About

The `vf-breadcrumb` component is a navigational item that can identify to the site visitor their location on the website. They are a visual representation of the site's heirachy.
The `vf-breadcrumb` component is a navigational item that can identify to the site visitor their location on the website. They are a visual representation of the site's hierarchy.

## Usage

Expand All @@ -18,6 +18,23 @@ Ensure that the complete navigational path is displayed in the breadcrumbs on th

The "Related" variant allows you to indicate related items as additional navigation to the page the site visitor is on. They should be placed inside the `vf-breadcrumbs` `<nav>` element and be a seperate unordered list.

### When to use

Use the breadcrumb when users would need to understand their current location in a website’s navigation structure

### When not to use

Breadcrumbs should not be used for websites that have a single level of hierarchy.
The breadcrumb nodes should not include parent categories which do not have separate pages. The only inactive link should be the current page’s node.

### Responsive

On smaller screens it is recommended that the paths of the breadcrumbs shown should be shortened. Configure the breadcrumbs to show only the direct parent node in the information architecture. This allows the user to see and navigate one step above in the website's hierarchy. The breaking point for the responsive breadcrumb is implemented at width below 768px.

### Accessibility

This component targets WCAG 2.1 AA accessibility.

## Install

This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-breadcrumbs` with this command.
Expand Down
12 changes: 11 additions & 1 deletion components/vf-breadcrumbs/vf-breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@
.vf-breadcrumbs__heading {
@include set-type(text-body--3, $custom-margin-bottom: 0);

display: inline;
display: inline-block;
line-height: 2.75;

@media (min-width: $vf-breakpoint--lg) {
.vf-breadcrumbs__list + & {
Expand All @@ -68,4 +69,13 @@

.vf-breadcrumbs__link {
color: currentColor;
display: inline-block;
line-height: 2.75;
}


@media (max-width: $vf-breakpoint--md) {
.vf-breadcrumbs__list:not(.vf-breadcrumbs__list--related) > .vf-breadcrumbs__item:not(:nth-last-child(2)) {
display: none;
}
}
Loading