Navigation & footer
The largest page in the library by a wide margin: twenty component families and roughly 140 variants covering every navigation surface the site has, plus the footer.
Scale
This page carries more variants than the previous eleven documented pages combined. It is also where the system’s two design generations sit closest together — the footer binds current and legacy tokens in the same component.
Three separate navigation bar families exist for three different properties: the main site, Ronix Mag, and a global-presence variant.
| Family | Properties | Variants |
|---|---|---|
| Footer | Type — 6 breakpoints | 6 |
| Main navigation bar | State × Type × layout | 8 |
| Mega Menu | Size × State | 12 |
| Mobile menu | State | 10 |
| navigation-bar-with-menus | State, per width | 12 |
| Ronixmag Top Navigation Bar | State, per width | 10 |
| Navigation-bar >992 | type × state | 6 |
| Small-frame-menu | size × Type | 10 |
| Large-frame-menu | Type × State | 6 |
| Menu | Size × State | 8 |
| Search-dropdown | Property 1 — 3 widths | 3 |
| Flag | Property 1 — countries | 30+ |
| Footer Collaps Button, Search box, Search-product-block, category-card, banner | various | 12 |
Navigation bar
54 px tall. Three properties: State (Close / Open),
Type (Extra / Defualt) and
Navigation bar layout (Large / Small).
Open adds 298 px at Large and 258 px at Small — the mega menu panel drops below the bar rather than overlaying it, so page content is pushed down.
The active top-level link takes a 2 px
Brand/Stroke/2/Selected underline — the same treatment as
the Product line tablist.
Mega menu
Its own component, twelve variants: Size of 1920, 1400 or
992 crossed with State of Category, Industry, Professions
or Series.
Those four States are four different taxonomies of the same catalogue — by product type, by industry served, by trade, and by product series.
Menu rows are Desktop List Item, a fixed 186×40
component. Seventeen instances sit loose on the page.
There is no Size below 992 — the mega menu does not exist on tablet or phone. That is what the mobile menu replaces.
| State | 1920 | 1400 | 992 | Organises by |
|---|---|---|---|---|
| Category | 1920×598 | 1200×598 | 992×528 | Product type |
| Industry | 1920×510 | 1200×514 | 992×448 | Sector served |
| Professions | 1920×510 | 1200×510 | 992×448 | Trade |
| Series | 1920×470 | 1200×420 | 992×369 | Product series |
category-card inside the mega menu carries a
Type = LTR | RTL property. Use the RTL variant on
right-to-left locales; other components in the mega menu mirror with the page direction.
Mobile menu
390 px wide, ten States — a whole navigation flow rather than a single panel: default, search, search results, three PLP levels, global presence, and three unnamed states.
Rows are full-width with a disclosure chevron where a level goes deeper. Height varies from 256 px to 1520 px depending on state.
Unnamed states
Four of the ten are called State8,
State9, State10 and
State11 — auto-generated names, never
replaced. The same problem as the
news information box, at four times the scale.
| State | Height | Purpose |
|---|---|---|
| defualt | 440 | Top level |
| Search-1 | 272 | Search focused |
| State10 | 1520 | Search results |
| plp-1 | 304 | Category level 1 |
| plp-2 | 640 | Category level 2 |
| plp-3 | 352 | Category level 3 |
| Global Presence | 307 | Country selector |
| State8 / State9 / State11 | 582 / 640 / 390 | Unnamed |
Search
Three components work together: a 768×40
Search box with Hover and Language properties, a
Search-dropdown at three widths, and a
159×233 Search-product-block — the product tile
shown inside search results.
The dropdown is 466–506 px tall, so search results are a substantial panel rather than a simple suggestion list.
The search box carries a Language=EN property with a
single value, so there is no localised variant to switch to. Treat the language as a
page-level setting rather than a property of the search box.
| Component | Size | Properties |
|---|---|---|
| Search box | 768 × 40 | Hover × Language=EN |
| Search-dropdown | 1920×466, 1200×506, 992×506 | Property 1 — width |
| Search-product-block | 159 × 233 | Default / Variant2 |
Footer
Six breakpoint variants. Height more than doubles as it narrows — 884 px at 1400 through 992, then 1515, 1587 and 1753 px as the link columns stack.
Structure
- Logo bar with Contact Us and Download catalog
- Four link columns plus a newsletter panel
- Offices block — Germany, U.A.E. and China
- Legal bar with social icons
The newsletter panel contains the form component
(State=1/2) and the “100% PRIVACY GUARANTEED” overline — the same pairing as
the contact form, but here the overline is Roboto rather than
Helvetica LT.
Global presence
A Flag component with more than thirty country variants at
48×32, driving a country selector that appears in the navigation bar and as a
mobile menu state.
Countries span the Middle East, Central Asia, the Caucasus, Eastern Europe, Latin America and North Africa — Saudi Arabia, Kuwait, Kazakhstan, Armenia, Lebanon, Jordan, Bahrain, Yemen, Uzbekistan, Oman, Azerbaijan, Qatar, Turkey, Kyrgyzstan, Russia, Croatia, Ukraine, Serbia, Belarus, Cyprus, Moldova, Brazil, Chile, Argentina, Bolivia, Colombia, Peru, Egypt and Libya.
Many of those are RTL or Cyrillic markets. Only one component in the library — the mega menu’s category card — has an RTL property.