radzen-blazor/RadzenBlazorDemos/Shared/MainTopNav.razor

<RadzenRow class="rz-w-100 rz-mx-auto rz-ps-6 rz-pe-2 rz-border-bottom" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center" Gap="0" RowGap="1rem" Style="background-color: var(--rz-base-darker);">
    <RadzenColumn Size="12">
        <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.SpaceBetween" class="rz-align-items-start rz-align-items-md-center rz-mx-auto">
            <RadzenLink Path="https://www.radzen.com" style="width: 124px; height: var(--rz-input-height); color: var(--rz-on-base-darker);" class="rz-display-flex rz-align-items-center" Text="www.radzen.com"></RadzenLink>
            <RadzenStack JustifyContent="Radzen.JustifyContent.Center" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.NoWrap" Gap="1rem" class="main-nav site-main-top-nav rz-align-items-start rz-align-items-sm-center">
                <RadzenMenu Style="-rz-icon-size: 1.25rem; padding: 0px;">
                    <RadzenMenuItem Text="Solutions" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2">
                        <RadzenMenuItem Path="https://www.radzen.com/crud-operations-and-data-management">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="table" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Efficiency at its best –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">CRUD Operations and Data Management</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/integrations">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="hub" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Connect to your data –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Seamless Integration</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/digital-transformation-and-modernization">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="tips_and_updates" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Say Hello to The Future –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Digital Transformation and Modernization</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/design-systems">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="format_shapes" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Promote Your Branding –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Design Systems and Consistency</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/various-use-cases">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="folder_special" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Versatile Use Cases –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">From Prototyping to Production</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/faster-time-to-market">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="timeline" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Seize the Market Faster –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Time to Market Reduced</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                        <RadzenMenuItem Path="https://www.radzen.com/education">
                            <Template>
                            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
                                <div class="rz-display-none rz-display-sm-block">
                                    <RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
                                        <RadzenIcon Icon="school" Style="font-size: 32px; font-weight: 300" /> 
                                    </RadzenStack>
                                </div>
                                <RadzenStack Gap="0">
                                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">A Teaching Tool –</RadzenText>
                                    <RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Empower the Next Generation</RadzenText>
                                </RadzenStack>
                            </RadzenStack>
                            </Template>
                        </RadzenMenuItem>
                    </RadzenMenuItem>
                    <RadzenMenuItem Text="Products" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" >
                        <RadzenMenuItem Text="Radzen Blazor Studio" Path="https://www.radzen.com/blazor-studio" />
                        <RadzenMenuItem Text="Radzen Blazor for Visual Studio" Path="https://www.radzen.com/blazor-visual-studio" />
                        <RadzenMenuItem Text="Radzen Blazor Components" Path="/" />
                    </RadzenMenuItem>
                    <RadzenMenuItem Text="Resources" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" >
                        <RadzenMenuItem Text="Community forum ↗" Path="https://forum.radzen.com" Target="_blank" />
                            <RadzenMenuItem Text="Online demos" Path="https://www.radzen.com/demos" />
                            <RadzenMenuItem Text="Roadmaps" Path="https://www.radzen.com/roadmaps" />
                            <RadzenMenuItem Text="Blogs" Path="https://www.radzen.com/blog" />
                            <RadzenMenuItem Text="YouTube channel ↗" Path="https://www.youtube.com/channel/UCAX4L9SPAigw41-RqTYEeKg" Target="_blank" />
                    </RadzenMenuItem>
                    <RadzenMenuItem Text="Success stories" Path="https://www.radzen.com/customers" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
                    <RadzenMenuItem Text="About" Path="https://www.radzen.com/about" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
                    <RadzenMenuItem Text="Pricing" Path="https://www.radzen.com/pricing" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
                    <RadzenMenuItem Text="Downloads" Path="https://www.radzen.com/downloads" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
                </RadzenMenu>
            </RadzenStack>
            <div Style="width: 124px;" class="rz-display-none rz-display-lg-flex">&nbsp;</div>
        </RadzenStack>
    </RadzenColumn>
</RadzenRow>

@code {
    
}