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 to
Community > 7.x Classic Help.
The
Ext.NET website 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiA0Ij4KICA8cGF0aCBkPSJNMCAwSDMyVjRIMFoiIGZpbGw9IiNlMWVkZmYiLz4KPC9zdmc+") 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,PHN2ZyBmaWxsPSIjNDI4NGZiIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE2Yy0uMjYgMC0uNTEtLjEtLjcxLS4yOWwtNi02QS45OTYuOTk2IDAgMTE2LjcgOC4zbDUuMyA1LjI5IDUuMjktNS4yOWEuOTk2Ljk5NiAwIDExMS40MSAxLjQxbC02IDZjLS4xOS4xOS0uNDQuMjktLjcuMjl6Ij48L3BhdGg+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!