How to use TopNavigation with AppLayout in dark mode

[purplepenguin2]

Is there a minimal example on how to properly use the TopNavigation component with the AppLayout component in dark mode? Here's a minimal example I have, but it doesn't have the proper bottom border like the actual demo does. Do I need to manually style this to get it to work? If so, is that a bug, it seems odd I would need to manually add a single 1px border when the components should otherwise work together?

I need to manually set the borderBlockEnd property to have a proper matching bottom border.

What currently renders:

What I believe should render:

Minimal example code:

import * as React from "react";
import {
  AppLayout,
  BreadcrumbGroup,
  Container,
  ContentLayout,
  Header,
  SideNavigation,
} from "@cloudscape-design/components";
import TopNavigation from "@cloudscape-design/components/top-navigation";
import Header from "@cloudscape-design/components/header";
import { applyMode, Mode } from "@cloudscape-design/global-styles";

export function App() {
  applyMode(Mode.Dark);

  return (
    <>
      <div
        id="h"
        style={
          {
            // borderBlockEnd: "solid 1px #414d5c",
          }
        }
      >
        <TopNavigation
          identity={{ href: "#", title: "Service" }}
          utilities={[
            {
              type: "button",
              text: "Link",
              href: "https://example.com/",
              external: true,
              externalIconAriaLabel: " (opens in a new tab)",
            },
            {
              type: "button",
              iconName: "notification",
              title: "Notifications",
              ariaLabel: "Notifications (unread)",
              badge: true,
              disableUtilityCollapse: false,
            },
            {
              type: "menu-dropdown",
              text: "Customer Name",
              description: "[email protected]",
              iconName: "user-profile",
              items: [
                { id: "profile", text: "Profile" },
                { id: "preferences", text: "Preferences" },
                { id: "security", text: "Security" },
                { id: "signout", text: "Sign out" },
              ],
            },
          ]}
        />
      </div>
      <AppLayout
        headerSelector="#h"
        breadcrumbs={
          <BreadcrumbGroup
            items={[
              { text: "Home", href: "#" },
              { text: "Service", href: "#" },
            ]}
          />
        }
        navigationOpen={true}
        navigation={
          <SideNavigation
            header={{
              href: "#",
              text: "Service",
            }}
            items={[{ type: "link", text: `Another Page`, href: `#` }]}
          />
        }
        content={
          <ContentLayout header={<Header variant="h1">Page header</Header>}>
            <Container header={<Header variant="h2">Container header</Header>}>
              Container content
            </Container>
          </ContentLayout>
        }
      />
    </>
  );
}

[cansuaa]

Hi, thanks for reaching out. It is correct that border is added in the demo, not in top navigation. The border is added in the custom-main-header class.

[purplepenguin2]

@cansuaa Thanks for the confirmation - could you clarify if this is technically a bug or is this intentionally not supported / requires the user to manually add the border?

Is there a best practice way to add it that would work across light/dark mode versus hard coding a color? I guess I was hoping for a small snippet or something if there was a recommended way of doing it.

[cansuaa]

Hi, I will discuss this with the team.

[cansuaa]

Hi, apologies for the delayed response. I discussed with the team and it's decided to add the border to the component directly. I'll work on this.