How to use TopNavigation with AppLayout in dark mode #3058
-
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 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>
}
/>
</>
);
} |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 2 replies
-
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 |
Beta Was this translation helpful? Give feedback.
-
@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. |
Beta Was this translation helpful? Give feedback.
-
Hi, I will discuss this with the team. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
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.