The Australian Government coat of Arms

Communities of practice

Communities of practice

Main nav

menu
ia
nav
navigation
responsive

#21

We as a government agency are looking forward to use Australian Design system as a frame work in our stack of technologies. However as a starter to create a POC, when i am trying to implement the NAV component, i don’t really see a Sub Menu items option, neither i am able to see any option that could make the nav go sticky or fixed on scroll. Now i can achieve all that by writing some custom javscript and come code to make it work… However was wondering if anybody can confirm there is no option such as sticky Nav or sub items in the menu available at the moment???


#22

Hi @Dinumoria

I can confirm that the main nav does not have a sticky nav or sub menu items option.
If you have any ideas or prototypes on how this could look like please do share with us!
This component is still in its early phase and we would love to hear your thoughts :slightly_smiling_face:


#23

Thanks for the response and i am going to work upon the NAV to add sub nav and Sticky Nav.
Also it’s is possible to provide some steps how can i change font-family at a global level as i implemented at Body level in my custom css but at different component levels, it still shows default font-family.

Please suggest!


#24

Hi Dinu great question! We use default SASS variables for fonts, colours, spacing etc in our core module. These can be overwritten to apply a global change to all design system components you are using in your project. Without knowing too much about your project structure, the easiest way to update the default fonts gloablly would be to modify the variable, $AU-font, from the Core Component, before you import the Ui-Kit SASS file containing the styling for each of the components.

So you could have a style directory with the following


styles/
   _uikit.scss
   _variables.scss
   main.scss

The variables.scss could contain the following to change the font family globally:


$AU-font: Verdana;

And in the main.scss file import in the following order:


@import "variables.scss"

@import "uikit.scss"

//other styles below

This way, the new font-family will be applied to all components that use the $AU-font variable.

Note, we advise using system fonts for faster download speeds.

Hope that helps :slight_smile:


#25

Thanks Raj for your prompt response!

But i am trying to avoid using node as my project is just basic static page and m using IIS to run the local instance in some cases as required!

So my web project structure is just basic download of Furnance.min.css & Furnance.min.js in there own folder sturcture and than i am wrtting my custom custom.sass file for any add on css.

Also i tried a different route by dowloading css modules file and i do see how each component has it’s own .SASS module.

But than i don’t see where uikit.scss file to be found. And if uikit.scss is not in package, i cann’t make a reference nor for the file and nor to the variable to change the font etc.

Please suggest!

Thanks,

Dinesh


#26

@Dinumoria

When you download the SASS modules, you will always get the “core” module. If you load that, it’s where all the things like fonts and colours are.

So as an example, if you use the sass 7-1 pattern, put all the sass packages you require in the vendor directory within your sass directory, import the required Design System component sass files into your main sass file, including dependencies like the core module, and when you build you will have all you need without needing to import any pre-built Design System CSS files.


#27

Hey @Dinumoria, sorry I should have been more clear. The uikit.scss file I was referring to is an arbitrarily named file that contains all the references to the sass files from the components you are using in your project, whether you download from npm or by direct download from our website. If you download sass modules from our website, you will get a file called main.scss. If you rename that file to uikit.scss, then my above example might make more sense :sweat_smile: . I’ve also PM’d you, it might be easier/quicker to have a discussion over a skype/google call to clear up any confusion you may be having :slight_smile:


#28

Thank you Sukhraj!

Will be on a vacation whole next week but will definetly check bck and work on it…

Thanks again for prompt responses!

Dinesh Khurana


#30

Just some quick notes, we did experiment with sticky and sub menu navigation. This becomes difficult to modify, scale, work on mobile devices and be accessible.

Sticky elements cause many problems with accessibility and user experience, they also take up valuable screen realestate on mobile devices. In some cases sticky elements make sense however I am always hesitant to implement them. Here is a great post by GDS diving deeper into this topic:

Try to structure your navigation in a way that doesn’t require sub items to be shown on hover. This requires pages to be designed to show child elements when the user opens a main navigation page. This approach can simplify your main navigation code and improve user experience as the user no longer has to understand that navigations show child elements on hover.