LIVE

Menu

Shauna Summers

Product Designer, Growth

27

Components

115

Documentation

12

Products Shipped

Shauna Summers

Product Designer, Growth

27

Components

115

Documentation

12

Products Shipped

usage guidelines

Interactions with the menu should provide clear feedback to users. For dropdown or expandable menus, incorporate subtle animations like fades or slides to enhance the experience. These animations should be quick to avoid delays in navigation, yet smooth enough to be visually pleasing. Hover states, active states, and focus indicators are crucial for guiding users through their navigation choices.

Intuitive Navigation and Logical Structure

Design menus with clear, logically-ordered items for effortless navigation, ensuring users can find what they need quickly and easily.

Consistent Design and Location

Maintain a uniform design and consistent placement for menus across the application or website, enhancing user familiarity and experience.

Accessibility and Keyboard Navigability

Ensure menus are fully accessible, with keyboard navigability and proper ARIA roles, allowing all users, including those with disabilities, to navigate smoothly.

accessibility standards

Interactions with the menu should provide clear feedback to users. For dropdown or expandable menus, incorporate subtle animations like fades or slides to enhance the experience. These animations should be quick to avoid delays in navigation, yet smooth enough to be visually pleasing. Hover states, active states, and focus indicators are crucial for guiding users through their navigation choices.

content standards

Interactions with the menu should provide clear feedback to users. For dropdown or expandable menus, incorporate subtle animations like fades or slides to enhance the experience. These animations should be quick to avoid delays in navigation, yet smooth enough to be visually pleasing. Hover states, active states, and focus indicators are crucial for guiding users through their navigation choices.

interaction and animation

Interactions with the menu should provide clear feedback to users. For dropdown or expandable menus, incorporate subtle animations like fades or slides to enhance the experience. These animations should be quick to avoid delays in navigation, yet smooth enough to be visually pleasing. Hover states, active states, and focus indicators are crucial for guiding users through their navigation choices.

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