\

Breadcrumb

in development

Breadcrumb

\

Accordian

\

Accordian

usage guidelines

While breadcrumbs are primarily functional, subtle interaction effects, like hover states on links, can enhance usability. These effects should be understated, maintaining the straightforward and utilitarian nature of breadcrumbs.

Clear Path Visualization

Use breadcrumbs to succinctly represent the user's navigational path, ensuring each step is clearly labeled and reflects the page hierarchy.

Interactive and Logical Order

Make all but the current page in the breadcrumb trail clickable, and order the trail logically to reflect the navigation structure.

Unobtrusive Design and Accessibility

Design breadcrumbs to be visually subtle yet noticeable, and ensure they are accessible with screen readers and keyboard navigation.

accessibility standards

While breadcrumbs are primarily functional, subtle interaction effects, like hover states on links, can enhance usability. These effects should be understated, maintaining the straightforward and utilitarian nature of breadcrumbs.

content standards

While breadcrumbs are primarily functional, subtle interaction effects, like hover states on links, can enhance usability. These effects should be understated, maintaining the straightforward and utilitarian nature of breadcrumbs.

interaction and animation

While breadcrumbs are primarily functional, subtle interaction effects, like hover states on links, can enhance usability. These effects should be understated, maintaining the straightforward and utilitarian nature of breadcrumbs.

CODE

export const ToastNotification = () => {
  return (
    <StyledToastNotification>
      <div className="rectangle" />
      <div className="frame">
        <div className="frame-wrapper">
          <div className="div">
            <Icon
              className="icon-instance"
              icon={<FilledYesSize20 className="attributes-instance" color="#FF5900" />}
            />
            <div className="text-wrapper">BEEPBOOP</div>
          </div>
        </div>
      </div>
      <div className="icon-wrapper">
        <Icon className="icon-instance" icon={<FilledNoSize12 className="attributes-instance" color="#FF5900" />} />
      </div>
    </StyledToastNotification>
  );
};

CODESANDBOX

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved