Hello @adham, and welcome to Ext.NET forums!
As your post is a request for an example instead of providing an actual example/extra, I moved your thread from General > Examples and Extras (https://forums.ext.net/forumdisplay.php?12) to Community > 7.x Classic Help (https://forums.ext.net/forumdisplay.php?51).
The Ext.NET website (https://ext.net/) itself is not an Ext.NET application, so it uses other resources and CSS styling.
Notwithstanding, with Ext.NET 7 and the exclusive Spotless theme, the result seen in our website would be just a few CSS styles away; a good start would be using the menuBar component:
<ext-menuBar>
<items>
<ext-menuItem text="Download" />
<ext-menuItem text="Pricing" />
<ext-menuItem text="Support">
<menu>
<ext-menu>
<items>
<ext-menuItem text="Examples Explorer" />
<ext-menuItem text="Forums" />
<ext-menuItem text="Docs" />
<ext-menuItem text="FAQ" />
<ext-menuItem text="GitHub Issues" />
<ext-menuSeparator />
<ext-menuItem text="Legacy WebForms Examples" />
<ext-menuItem text="Legacy MVC Examples" />
<ext-menuSeparator />
<ext-menuItem text="Identity Guidelines" />
<ext-menuItem text="Contact" />
</items>
</ext-menu>
</menu>
</ext-menuItem>
<ext-menuItem text="Blog" />
<ext-menuItem text="Themes" />
</items>
</ext-menuBar>
And then, to add the extra effects in the website, these CSS style overrides would take the example very close to what the website is:
<style type="text/css">
/* Match the font size */
.x-menu-item-text-default-menubar, .x-menu-item-text-default {
font-size: 16px
}
/* Match the menuitem hover effect*/
.x-menu-item-default-menubar.x-menu-item-active, .x-menu-item-default-menubar.x-menu-item-focus {
background-color: transparent
}
.x-menu-item-default-menubar.x-menu-item-active a>span, .x-menu-item-default-menubar.x-menu-item-focus a>span {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5 vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiA0Ij4KICA8c GF0aCBkPSJNMCAwSDMyVjRIMFoiIGZpbGw9IiNlMWVkZmYiLz4 KPC9zdmc+") bottom center no-repeat;
background-size: 32px 4px;
bottom: -1rem;
height: 45px
}
/* Match the menu expander icon */
.x-menu-item-arrow-default-menubar:before {
content: "_";
background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDI4NGZiIiB4bWxucz0 iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9I jAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE2Yy0uMjYgMC0uNTE tLjEtLjcxLS4yOWwtNi02QS45OTYuOTk2IDAgMTE2LjcgOC4zb DUuMyA1LjI5IDUuMjktNS4yOWEuOTk2Ljk5NiAwIDExMS40MSA xLjQxbC02IDZjLS4xOS4xOS0uNDQuMjktLjcuMjl6Ij48L3Bhd Gg+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiI +PC9wYXRoPjwvc3ZnPg==") center center no-repeat;
background-size: 16px 16px
}
</style>
Above, I have transformed the dash highlight that shows below the selected menu entry into a SVG square, so we could replace it with the background highlight without the need of extra DOM elements. That would be possible, by changing instead the DOM template the component defines.
The unencoded first SVG in an HTML block:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 4">
<path d="M0 0H32V4H0Z" fill="#e1edff"/>
</svg>
The second encoded SVG string is just a copy-paste of the one in Ext.NET WebSite pulling the color from its CSS references:
<svg fill="#4284fb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 16c-.26 0-.51-.1-.71-.29l-6-6A.996.996 0 116.7 8.3l5.3 5.29 5.29-5.29a.996.996 0 111.41 1.41l-6 6c-.19.19-.44.29-.7.29z"/>
<path fill="none" d="M0 0h24v24H0z" />
</svg>
Hope this helps!