Top Navigation - Menu Trigger Button is Empty

[piyushpranjal03]

Empty menu-trigger button is displayed on mobile screens. In the demo it is shown as it will turn into More text with down arrow. However, here it is not showing anything.

[cansuaa]

Hi, in our top navigation demo the behaviour works as expected. Could you share a reproducible example?

[piyushpranjal03]

Unfortunately it is not working for me.
Just to ensure whether something else (other part of my project) is causing issues I create a new react project using vite and this issue is there as well.

Please find the WebStorm project zip here

Steps Taken:

1. npm create vite@latest // Created react TS project
2. npm install @cloudscape-design/global-styles // installed global style
3. import "@cloudscape-design/global-styles/index.css" // imported css style inside main.tsx
4. npm install @cloudscape-design/components // installed components
5. npm install @cloudscape-design/chat-components // installed chat components
6. Then created a component named TopNavbar.tsx

import TopNavigation from "@cloudscape-design/components/top-navigation";

import galaxiaLogo from './images/gx_plus_inv.png'

export default () => {
  const logo: string = galaxiaLogo;

  return (
    <TopNavigation
      identity={{
        href: "#",
        logo: {
          src: logo,
          alt: "Galaxia+ Logo"
        }
      }}
      utilities={[
        {
          type: "button",
          text: "Wiki",
          href: "#",
          external: true,
          externalIconAriaLabel: " (opens in a new tab)"
        },
        {
          type: "button",
          iconName: "notification",
          title: "Notifications",
          ariaLabel: "Notifications (unread)",
          badge: true,
          disableUtilityCollapse: true
        },
        {
          type: "menu-dropdown",
          text: "Internal",
          ariaLabel: "Settings",
          title: "Settings",
          expandableGroups: true,
          items: [
            {
              id: "dev-req",
              text: "Development Request",
              items: [
                {
                  external: true,
                  id: "new-product-req",
                  text: "New Product Request",
                  href: "#"
                },
                {
                  external: true,
                  id: "new-feature-req",
                  text: "New Feature Request",
                  href: "#",
                },
                {
                  external: true,
                  id: "support-req",
                  text: "Support Request",
                  href: "#",
                },
                {
                  external: true,
                  id: "support-req-data",
                  text: "Support Request - Data",
                  href: "#",
                }
              ]
            },
            {
              id: "mbr",
              text: "MBR",
              items: [
                {
                  external: true,
                  id: "product-calendar",
                  text: "Product Calendar",
                  href: "#"
                },
                {
                  external: true,
                  id: "galaxia-update",
                  text: "Galaxia+ Update",
                  href: "#"
                },
                {
                  external: true,
                  id: "qs-dashboard-update",
                  text: "QS Dashboard Update",
                  href: "#"
                },
                {
                  external: true,
                  id: "program-update",
                  text: "Program Update",
                  href: "#"
                },
                {
                  external: true,
                  id: "leadership-view",
                  text: "Leadership View",
                  href: "#"
                }
              ]
            }
          ]
        },
        {
          type: "button",
          text: "Adoption Dashboard",
          href: "https://example.com/",
          target: "_blank"
        },
        {
          type: "menu-dropdown",
          text: "Contact Us",
          items: [
            {
              external: true,
              id: "track-your-request",
              text: "Track Your Request",
              href: "#"
            },
            {
              external: true,
              id: "new-product-req",
              text: "New Product Request",
              href: "#"
            },
            {
              external: true,
              id: "new-feature-req",
              text: "New Feature Request",
              href: "#",
            },
            {
              external: true,
              id: "report-a-bug",
              text: "Report a Bug",
              href: "#",
            },
            {
              external: true,
              id: "access-request",
              text: "Access Request",
              href: "#",
            },
            {
              external: true,
              id: "support-req",
              text: "Support Request",
              href: "#",
            }
          ]
        },
        {
          type: "button",
          text: "pppranja",
          target: "_blank",
          href: "https://abcedfgh/users/xyz",
          iconSvg: <img id="user-avatar" src="src/images/8c6a785483ee3e92d8163f2fac2cc567.jpg" alt="User Image"/>
        },
      ]}
    />
  );
}

Replaced index.css with index.scss

#initial-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2147483000;
  background: #232f3e;
  opacity: 1;
  transition: opacity 150ms linear;

  > img {
    width: 245px;
    margin-bottom: 1.2rem;
  }

  > div {
    width: 200px;
    background: rgba(255, 255, 255, 0.25);
  }

  .progress {
    background: #FF9900;
    float: left;
    width: 85%;
    height: 3px;
    animation: {
    name: slideInFromLeft;
    duration: 30s;
    timing-function: cubic-bezier(0, .9, .9, .999);
  }
  }
}

@keyframes slideInFromLeft {
  0% {
    width: 0;
  }
  85% {
    width: 85%;
  }
}

a[href^="https://abcedfgh/users/"] {
  display: flex !important;
  align-items: center !important;
}

span:has(> #user-avatar) {
  margin-right: 4px !important;
  block-size: 36px !important;
  width: 32px !important;
}

#user-avatar {
  border-radius: 50%;
  width: 32px !important;
  height: 32px !important;
}

7. npm install -D sass-embedded // installed another dependency to use saas
8. Commented // import './App.css' from App.tsx

Please let me know if you need any other information. Thanks :)

[cansuaa]

Thank you for sharing. I realized that the i18nStrings are not passed to the top navigation which are needed to have the text appear. Once I passed them your code started showing the More text in the button.

You can either pass them to the component manually (see in our demo) or use our i18nProvider. We have many components that have i18n strings and using the provider will pass their value automatically if they are supported. You can see if they are supported through our website, for an example in top navigation API there is this note attached to the i18nStrings property

Note: The property is part of built-in internationalization. This property is automatically provided if the application uses Cloudscape's I18nProvider.

[piyushpranjal03]

Thanks this works perfectly