I am working on a huge system which is meant to provide internal user to manage products' lifecycle. Thus, it's like a complicated dashboard containing lots of information and data grid and functionalities.
One of the pages contained a toolbar including the following elements and a data grid (aka table) right beneath the toolbar.
1. External Links Clicking the link would make users be redirected to another page but still in the same system.
ex: from "website.com/feature-one" to "website.com/feature-two" or from "website.com/feature-one?param=1" to "website.com/feature-one?param=2"
2. Action Clicking the action would affect the data grid, just like the common button we saw in most of the dashboard website/system.
ex: Add/Update something...etc.
3. Generate Report I think this is actually kind of action...but still something different since it won't affect the data grid but export/generate something from the related data grid
ex: Export to Excel/ Publish Sales Report
Therefore, I am suffering from how to provide all these functions on the same page at the same time.
This page was used to display the whole functions as an anchor style (just like the image below, I only changed the wording but not the appearance....yeah so old school right!)
(Also please imagine there is a huge data grid beneath these various functions.)
Here are some challenges I had already come up with:
How to display all the buttons in only one line if the width of the browser isn't wide enough. (doesn't mean RWD is necessary, but still, have to take good care in case of the amount of the buttons being too many)
I know one of the solutions is to go with the dropdown-button, but due to the previous appearance(attached on top), gather some of the actions in only one dropdown-button might cause users' confusion right Q_Q.
Please recommend some approach if you have any good or crazy idea, I would be very appreciated.....QQ Thanks!